Nginx CORS 设置

Question

我在我的 Nginx 服务器上运行了一个非常简单的本地 PHP 路由器，它为来自我的 Android 应用程序的请求提供服务。方法调用通常遵循

https://example.com/lua/path/to/method

例如

https://example.com/lua/logerror/errormsg

https://example.com/lua/recordscore/scoredata

lua 位在很大程度上是历史性的 - 底层路由器实际上是 PHP。到目前为止，我已经能够使用以下 Nginx 配置块

location /lua
{
 if (!-e $request_filename) {rewrite ^/(.*)$ /lua/index.php?$1 last;}
} 

在我的应用中，这些请求以XMLHttpRequests 发出。

然而，最近对 Chrome 的升级——我的 Cordova/Android 应用程序使用的 Android 网络视图（从 Android 6 开始）几乎与 Chrome 获得更新同时更新——让苹果购物车感到不安。现在，当我通过chrome://inspect 调试我的应用程序时，我发现错误消息类似于

在“https://example.com/lua/logerror/Zooming”访问 XMLHttpRequest 来自原点“文件：//”已被 CORS 策略阻止：否 'Access-Control-Allow-Origin' 标头出现在请求的 资源。

---

我还使用了较新的 fetch API，在该 API 中我可以通过配置获取来解决问题

{mode:'no-cors',cache:'no-cache',credentials:'omit'}

但是，将所有内容更改为使用 fetch 并不是一个简单的选择。

---

我想我可以通过将上面的 Nginx 配置块更改为来解决这个问题

location /lua
{
 add_header Access-Control-Allow-Origin *;   
 if (!-e $request_filename) {rewrite ^/(.*)$ /lua/index.php?$1 last;}
} 

但这并没有帮助。我对 Nginx 配置的了解不足以帮助我确定如何解决此问题。

Answer 1

这是我目前用于 NGINX 的 CORS 配置。您应该能够通过替换您的 add_header 尝试来解决您的问题。

 if ($request_method = 'OPTIONS') {
    add_header 'Access-Control-Allow-Origin' '*';

    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

    add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

    add_header 'Access-Control-Max-Age' 1728000;
    add_header 'Content-Type' 'text/plain charset=UTF-8';
    add_header 'Content-Length' 0;
    return 204;
 }
 if ($request_method = 'POST') {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
 }
 if ($request_method = 'GET') {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
 }

警告：我使用了 *，但您可以 - 并且应该 - 始终将这些规则限制在更严格的域/子域列表中，除非您真的想要强制执行广泛开放的 CORS 策略（并且您完全了解风险）。

由于这是一段相当长的代码，您可能希望将其放在单独的文件中（例如 /etc/nginx/cors-settings.conf），然后将其包含在以下单行中：

include /etc/nginx/cors-settings.conf;

编辑：您要求提供 NGINX Cors 设置，但您看到的 Chrome 警告可能与此无关。这也可能是由于您使用的 Chrome 扩展程序正在尝试执行跨源资源共享，而没有以正确的方式配置其 manifest.json 文件。如果您的问题仍然存在，我将首先尝试使用隐身模式重现它，然后 - 如果问题没有显示在那里 - 我会停用 Chrome 扩展程序（一次一个）以找到罪魁祸首。

如果您发现“违规”扩展名，则可以检查其 ma​​nifest.json 文件，看看它是否包含类似以下内容：

"permissions": [
   "http://*/"
 ]

如果没有类似的情况，我会联系作者并通知他/她这个问题。