Nginx PHP API CORS

Question

我正在使用VueJS开发SPA，它应该在远程域上使用PHP API/Nginx运行。当然，我也遇到了CORS问题。

这是最近的Nginx配置文件：

location / {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE, HEAD';
add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,some_my_tokens';
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Max-Age' '1728000';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Headers' 'Origin,Content-Type,Accept,Authorization,some_my_tokens';
add_header 'Content-Type' 'text/plain; charset=UTF-8';
add_header 'Content-Length' '0';
return 204;
}
try_files $uri $uri/ /index.php?$args;
}

我仍然收到错误"请求的资源上不存在'访问控制-允许源'标头。因此，不允许访问源'http：//remote_host：8080'。

请帮忙。

Answer 1

在索引中添加以下代码.php

if (isset($_SERVER['HTTP_ORIGIN'])) {
header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Max-Age: 86400'); // cache for 1 day
}
// Access-Control headers are received during OPTIONS requests
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD'])) {
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
}
if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS'])) {
header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");
}
exit(0);
}

Answer 2

就我而言，当我们的后端发送错误响应时，例如在 PHPheader('HTTP', ERROR_CODE)中，导致响应中缺少 CORS 标头。

将always参数添加到这些 CORS 标头可解决此问题：

add_header Access-Control-Allow-Origin $http_origin always;

正如文档所述add_header指令

将

指定的字段添加到响应标头，前提是响应代码等于 200、201 (1.3.10(、204、206、301、302、303、304、307(1.1.16、1.0.13(或 308 (1.13.0(。

和文档说always参数

如果指定了 always 参数 (1.7.5(，则无论响应代码如何，都将添加标头字段。

Answer 3

它之所以说No 'Access-Control-Allow-Origin' header is present on the requested resource是因为.....

等着吧....

请求的资源上不存在"访问控制允许源"标头。

您的位置块中有此指令：

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

但是，对于OPTIONS请求，您有一个if条件，在该级别中，您没有访问控制允许源标头。

从文档中

可能有几个add_header指令。这些指令是 从上一个级别继承当且仅当没有 add_header在当前级别定义的指令。

因此，您的OPTIONS预检将缺少标题。

Answer 4

我建议在nginx.conf上使用more_set_headers而不是add_header，例如：

location / {
more_set_headers 'Access-Control-Allow-Origin' '*';
more_set_headers 'Access-Control-Allow-Credentials' 'true';
more_set_headers 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE, HEAD';
more_set_headers 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,some_my_tokens';
if ($request_method = 'OPTIONS') {
more_set_headers 'Access-Control-Max-Age' '1728000';
more_set_headers 'Access-Control-Allow-Credentials' 'true';
more_set_headers 'Access-Control-Allow-Headers' 'Origin,Content-Type,Accept,Authorization,some_my_tokens';
more_set_headers 'Content-Type' 'text/plain; charset=UTF-8';
more_set_headers 'Content-Length' '0';
return 204;
}
try_files $uri $uri/ /index.php?$args;
}

more_set_headers指令是 HttpHeadersMore 模块的一部分，该模块包含在 nginx 的 nginx-extras 风格中，您可以通过执行以下操作将其安装在 ubuntu 16 上：

sudo apt-get install nginx-extras