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

Posted 2023-03-04

【中文标题】hapi.js Cors Pre-flight 不返回 Access-Control-Allow-Origin 标头

【英文标题】：hapi.js Cors Pre-flight not returning Access-Control-Allow-Origin header

【发布时间】：2016-08-21 09:34:54

【问题描述】：

我有一个使用 (Dropzone js) 上传的 ajax 文件。它将文件发送到我的 hapi 服务器。我意识到浏览器发送了一个 PREFLIGHT OPTIONS METHOD。但我的 hapi 服务器似乎没有发送正确的响应标头，所以我在 chrome 上遇到错误。 这是我在 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.

这是 hapi js 路由处理程序

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

据我了解，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

提前致谢

【问题讨论】：

试试 Hapi Cors Header Plugin https://github.com/gr2m/hapi-cors-headers.

【参考方案1】：

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

我在 localhost:3300 启动了我的 Hapi-Server。然后我从localhost:80 向http://localhost:3300/ 提出了测试CORS 的请求。这导致 chrome 仍然阻止资源，因为它说

请求中没有“Access-Control-Allow-Origin”标头 资源

（这根本不是真的）。 然后我将 XHR-Request 更改为将 url 获取到一个 url，我实际上在 HapiJS 中创建了一个路由，在我的例子中是http://localhost:3300/api/test。 这行得通。

为了解决这个问题，我在 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());
  
)

【参考方案2】：

hapi cors: true 是一个通配符规则，它允许来自所有域的 CORS 请求，除了少数情况，包括 hapi's default whitelist 之外的其他请求标头时：

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

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

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) 

        ...
    
);

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

尚无法通过他们的配置，但有一个待处理的 PR 允许它：https://github.com/enyo/dropzone/pull/685

【讨论】：

好的..这很有效，我发现的另一个解决方案是使用 hapi-cors-header 插件npmjs.com/package/hapi-cors-headers

可以的。不过不推荐。严格的白名单是有原因的（安全性）。

有没有一种方法可以为所有路由而不是逐个路由设置 CORS 原点？

@Notamachine 是的，这是可能的，您可以通过将其添加到服务器配置而不是路由配置来做到这一点。