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）从此处https://enable-cors.org/server_nginx.html将Nginx配置粘贴到我的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应用程序的cloudfront发行版的'Behaviours'页面中：

“基于选定请求标头的缓存”->将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成功。

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

Answer 1

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

add_header

否则，如果您不包括该add_header 'Access-Control-Allow-Origin' '*' always;参数，nginx只会将always标头添加到Access-Control-Allow-Origin成功响应中，并且2xx重定向—但不会重定向到3xx个错误。请参阅https://nginx.org/en/docs/http/ngx_http_headers_module.html#add_header上的文档。

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

1 个答案: