hapi.js Cors Pre-flight不返回Access-Control-Allow-Origin标头

I have an ajax file upload using (Dropzone js). which sends a file to my hapi server. I realised the browser sends a PREFLIGHT OPTIONS METHOD. but my hapi server seems not to send the right response headers so i am getting errors on chrome. here is the error i get on chrome

我使用(Dropzone js)上传了ajax文件。它将文件发送到我的hapi服务器。我意识到浏览器发送了一个PREFLIGHT OPTIONS METHOD。但我的hapi服务器似乎没有发送正确的响应标题,所以我在chrome上遇到错误。这是我得到的错误

XMLHttpRequest cannot load http://localhost:3000/uploadbookimg. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

this is the hapi js route handler

这是hapi js路由处理程序

server.route({
        path: '/uploadbookimg',
        method: 'POST',
        config: {
            cors : true,
            payload: {
                output: 'stream',
                parse: true,
                allow: 'multipart/form-data'
            },
        handler: require('./books/webbookimgupload'),
        }
    });

In my understanding hapi js should send all cors headers from the Pre-fight (OPTIONS) request. Cant understand why its is not

在我的理解中,hapi js应该从Pre-fight(OPTIONS)请求发送所有cors头。不明白为什么不是

Network request /response from chrome

来自Chrome的网络请求/响应

**General**
Request Method:OPTIONS
Status Code:200 OK
Remote Address:127.0.0.1:3000

**Response Headers**
view parsed
HTTP/1.1 200 OK
content-type: application/json; charset=utf-8
cache-control: no-cache
vary: accept-encoding
Date: Wed, 27 Apr 2016 07:25:33 GMT
Connection: keep-alive
Transfer-Encoding: chunked

**Request Headers**
view parsed
OPTIONS /uploadbookimg HTTP/1.1
Host: localhost:3000
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Access-Control-Request-Method: POST
Origin: http://localhost:4200
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.87 Safari/537.36
Access-Control-Request-Headers: accept, cache-control, content-type
Accept: */*
Referer: http://localhost:4200/books/upload
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8

Thanks in advance

提前致谢

2 个解决方案

#1

The hapi cors: true is a wildcard rule that allows CORS requests from all domains except for a few cases including when there are additional request headers outside of hapi's default whitelist:

hapi cors:true是一个通配符规则,允许来自所有域的CORS请求,除了少数情况,包括在hapi的默认白名单之外还有其他请求标头时:

["accept", "authorization", "content-type", "if-none-match", "origin"]

[“接受”,“授权”,“内容类型”,“if-none-match”,“origin”]

See the cors option section in the API docs under route options:

请参阅路径选项下API文档中的cors选项部分:

headers - a strings array of allowed headers ('Access-Control-Allow-Headers'). Defaults to ['Accept', 'Authorization', 'Content-Type', 'If-None-Match'].

headers - 允许标头的字符串数组('Access-Control-Allow-Headers')。默认为['Accept','Authorization','Content-Type','If-None-Match']。

additionalHeaders - a strings array of additional headers to headers. Use this to keep the default headers in place.

additionalHeaders - 标题的附加标题的字符串数组。使用此选项可以保留默认标头。

Your problem is that Dropzone sends a couple of headers along with the file upload that aren't in this list:

您的问题是Dropzone发送了几个标题以及不在此列表中的文件上载:

• x-requested-with (not in your headers above but was sent for me)

x-requested-with(不在您的标题中,但是已经发给我)

• cache-control

You have two options to get things working, you need to change something on either the server or the client:

您有两种方法可以使工作正常,您需要在服务器或客户端上进行更改:

Option 1 - Whitelist the extra headers:

server.route({
    config: {
        cors: {
            origin: ['*'],
            additionalHeaders: ['cache-control', 'x-requested-with']
        }
    },
    method: 'POST',
    path: '/upload',
    handler: function (request, reply) {

        ...
    }
});

Option 2 - Tell dropzone to not send those extra headers

Not possible yet through their config but there's a pending PR to allow it: https://github.com/enyo/dropzone/pull/685

不可能通过他们的配置,但有一个待定的PR允许它:https://github.com/enyo/dropzone/pull/685

#2

I want to add my 2 cents on this one as the above did not fully resolve the issue in my case.

我想在这个上加2美分,因为上面没有完全解决我的问题。

I started my Hapi-Server at localhost:3300. Then I made a request from localhost:80 to http://localhost:3300/ to test CORS. This lead to chrome still blocking the ressource because it said that

我在localhost:3300开始了我的Hapi-Server。然后我从localhost发出请求:80到http:// localhost:3300 /来测试CORS。这导致chrome仍然阻止了资源,因为它说

No 'Access-Control-Allow-Origin' header is present on the requested resource

请求的资源上不存在“Access-Control-Allow-Origin”标头

(which was not true at all). Then I changed the XHR-Request to fetch the url to a url for which I actually created a route inside HapiJS which - in my case - was http://localhost:3300/api/test. This worked.

(这根本不是真的)。然后,我改变了XHR请求,以获取网址为我实际创建内部HapiJS其中一个路由器的URL - 在我的情况 - 是的http://本地主机:3300 / API /测试。这很有效。

To overgo this issue I created a "catch-all" route in HapiJS (to overgo the built-in 404 catch).

为了解决这个问题,我在HapiJS中创建了一条“全能”路线(为了克服内置的404捕获)。

const Boom = require('Boom'); //You can require Boom when you have hapi

Route({
  method: '*',
  path: '/{any*}',
  handler: function(request, reply) {
    reply(Boom.notFound());
  }
})