422 错误缺少 Access-Control-Allow-Origin 响应标头答案

【问题标题】：422 error lacks Access-Control-Allow-Origin response header422 错误缺少 Access-Control-Allow-Origin 响应标头
【发布时间】：2020-05-12 12:23:32
【问题描述】：

1) 我将我的 react 应用程序托管在 Cloudfront 提供的具有自定义域的 S3 存储桶中。

2) 然后我的 Express API 服务器使用 Nginx/PM2 在 Lightsail 实例上运行。

现在我在从我的 React 调用端点时遇到422 CORS 问题。我尝试了以下方法：

1) 将以下 CORS 规则添加到包含我的 React 应用资产的 S3 存储桶：

<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

2) 将 Nginx 配置从这里 https://enable-cors.org/server_nginx.html 粘贴到我的 api 的服务器块：

server {
  location / {
     proxy_pass http://localhost:3000
     ...
     ...
     if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        #
        # Custom headers and headers various browsers *should* be OK with but aren't
        #
     ...
     ...

3) 在我的 React 应用程序的云端分发的“行为”页面中：

'缓存基于选定的请求标头'->将Origin标头列入白名单
允许所有 http 方法...
转发所有 cookie...
也转发所有“查询字符串转发和缓存”...

但仍然没有运气。

我可以通过运行这个得到一些响应： curl -s -D - -H "Origin: https://app.react.app" https://api.react.app/isOnline

curl -i -X OPTIONS https://api.react.app/isOnline 给我HTTP/1.1 204 No Content 成功。

我还能尝试什么...？感谢任何指针..

【问题讨论】：

您可以尝试使用add_header 'Access-Control-Allow-Origin' '*' always; — 即将always 关键字附加到您的add_header 指令中。 nginx.org/en/docs/http/ngx_http_headers_module.html#add_header。否则，如果您不这样做，nginx 只会将 Access-Control-Allow-Origin 标头添加到 2xx 成功响应和 3xx 重定向 - 但不会添加到 4xx 错误。这将解决 CORS 问题 - 但问题仍然是服务器响应 422 错误而不是 200 OK 成功响应。
您可以尝试使用 curl 发出 OPTIONS 请求，如下所示：curl -X OPTIONS [other args] [URL for your Express API endpoint]。如果https://app.react.app 是运行您从中发出请求的前端代码的 React 应用程序的 URL，那么当您使用 curl 进行测试时，您不想向 https://app.react.app 发出请求——而是您想要对您的 Express API 端点的请求。
谢谢@sideshowbarker。正如预期的那样，curl -i -X [URL for your Express API endpoint] 给了我HTTP/1.1 204 No Content！但是为什么仍然422和浏览器中的CORS抱怨无法读取我的https://api.react.app/some_endpoint中的远程资源:(
似乎您需要检查 Express API 端点服务器的服务器端的服务器日志，并查看它在那里记录的哪些消息导致它最终发回 422 响应。是否有某些原因您无法访问这些日志？还是您已经检查了这些日志但没有发现任何内容？
@sideshowbarker 现在可以使用了！ always 是票。 422 与这里的 CORS 问题无关（这是我明确设置的错误代码，抱歉！）。如果您要编辑问题并为此创建答案，我会完全接受！（编辑：我将尝试恢复第 1 项和第 3 项，看看它是否仍然有效..）

标签： node.js nginx amazon-s3 cors amazon-cloudfront

【解决方案1】：

如果您想确保Access-Control-Allow-Origin 标头包含在422 错误响应或其他4xx 响应中，那么您需要将always 参数附加到您的add_header 指令中，如下所示：

add_header 'Access-Control-Allow-Origin' '*' always;

否则，如果你不包含 always 参数，nginx 只会将 Access-Control-Allow-Origin 标头添加到 2xx 成功响应和 3xx 重定向 - 但不会添加到 4xx 错误。请参阅https://nginx.org/en/docs/http/ngx_http_headers_module.html#add_header 上的文档。

【讨论】：

非常感谢您的帮助！