422 错误缺少 Access-Control-Allow-Origin 响应 header

Question

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 应用的云端分发版 'Behaviours' 页面中：

'Cache Based on Selected Request Headers' -> 白名单 Origin header
允许所有 http 方法...
转发所有 cookies...
也转发所有 'Query String Forwarding and Caching'...

但还是没有运气。

我可以从运行中得到一些回应： 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 成功。

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

Answer 1

如果要确保 Access-Control-Allow-Origin header 包含在 422 错误响应或其他 4xx 响应中，则需要附加 always 参数到你的 add_header 指令，像这样：

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

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

中的文档

422 错误缺少 Access-Control-Allow-Origin 响应 header

422 error lacks Access-Control-Allow-Origin response header

node.js

nginx

amazon-s3

cors

amazon-cloudfront