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

kwe*_*360 9 javascript node.js cors dropzone.js hapijs

我使用(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.
Run Code Online (Sandbox Code Playgroud)

这是hapi js路由处理程序

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

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

来自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
Run Code Online (Sandbox Code Playgroud)

提前致谢

Mat*_*son 15

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

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

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

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

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

您的问题是Dropzone会发送一些标题以及不在此列表中的文件上载:

  • x-requested-with (不是在上面的标题中,而是发给我的)
  • cache-control

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

选项1 - 将额外标题列入白名单:

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

        ...
    }
});
Run Code Online (Sandbox Code Playgroud)

选项2 - 告诉dropzone不发送那些额外的标头

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

  • 是的,那会起作用。但不推荐它。严格白名单的存在是有原因的(安全)。 (2认同)