NGinx 和 fetch React Native 的 CORS 问题

Question

当我想实现一个 React Native 应用程序时，我仅在网络浏览器上遇到 Cors 问题。 虽然我已经配置好了

Access-Control-Allow-Origin: *

我仍然收到来自浏览器的 CORS 错误。 我有什么遗漏的吗？

客户：

return fetch(newURL, {
    method: "GET",
    credentials: 'include',
    headers: {
        'Authorization': 'Bearer ' + accessToken,
        'Content-Type': 'application/json'
    },
})

服务器 nginx：

       location / {
            proxy_set_header X-Forwarded-Host $host;
            proxy_set_header X-Forwarded-Server $host;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            #add_header 'Cache-Control' 'public';
            add_header 'allow' 'GET';
            add_header 'access-control-allow-origin' '*';
            add_header 'access-control-allow-credentials' 'true';
            add_header 'access-control-expose-headers' 'filename';
            proxy_hide_header X-Frame-Options";
            #expires +1y;
            if ($request_method = OPTIONS) {
              add_header Content-Type text/plain;
              add_header Content-Length 0;
              return 204;
            }

            proxy_pass http://127.0.0.1:9000/;
    }

}

互动

如您所见，由于 CORS，我的查询失败，无法尝试许多不同的选项，但无法解决它。

有什么线索吗？

谢谢！

Answer 1

问题是因为我使用的是 Spring Boot，所以 OPTIONS http 方法没有正确处理。另外，由于我提供了 Bearer，CORS 限制不支持通配符。

这是我的Nginx工作配置，您可能需要根据需要添加一些http方法。

 location / {
            proxy_set_header X-Forwarded-Host $host;
            proxy_set_header X-Forwarded-Server $host;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

            if ($request_method = OPTIONS) {
               add_header Access-Control-Allow-Origin $http_origin ;
               add_header Access-Control-Allow-Credentials 'true' ;
               add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
               add_header Access-Control-Allow-Headers 'content-type,authorization';
               add_header Content-Type text/plain;
               add_header Content-Length 0;
               return 204;
            }
            add_header Access-Control-Allow-Origin $http_origin;
            add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
            add_header Access-Control-Allow-Credentials 'true' ;
            add_header Access-Control-Allow-Headers 'content-type,authorization';


            proxy_hide_header "X-Frame-Options";

            proxy_pass http://127.0.0.1:9000/;
    }