nginx 配置add_header 'Access-Control-Allow-Origin' '*' 依然存在跨域问题

1.问题描述:
前端域名A 在POST请求后端域名为B 的一个接口时候请求成功时不存在跨域问题,请求失败时浏览器提示跨域。

解决:
当请求成功时,HTTP CODE 为200。而请求失败时HTTP CODE 为400, 此时add_header ‘Access-Control-Allow-Origin’ ‘*’ 配置无效!设置无论HTTP CODE 为何值时都生效需要加 always 。nginx版本>1.7.5时候无须加always。

add_header ‘Access-Control-Allow-Origin’ ‘*’ always;

nginx文档地址:
http://nginx.org/en/docs/http/ngx_http_headers_module.html

文档原文:

Syntax: add_header name value [always];
Default: —
Context: http, server, location, if in location

If the always parameter is specified (1.7.5), the header field will be added regardless of the response code.

2.附配置:后端为PHP时需要将 add_header ‘Access-Control-Allow-Origin’ ‘’ always; 增加在 location ~.php{ } 的模块内。以下配置中add_header ‘Access-Control-Allow-Origin’ '’ always; 写在location ~.php{ } 上面一行无效的原因(已测试,正确),文档有写:

There could be several add_header directives. These directives are inherited from the previous level if and only if there are no add_header directives defined on the current level.

当前层级无 add_header 指令时,则继承上一层级的add_header。相反的若当前层级有了add_header,就应该无法继承上一层的add_header。

server {
        listen 80;
        server_name localhost 127.0.0.1 demo.com;
        root /www;
        location ~ \.php {
        client_body_timeout 6s;
        	if ($request_method = 'OPTIONS') {
            	add_header 'Access-Control-Allow-Origin' '*' always;
            	add_header 'Access-Control-Allow-Credentials' 'true';
            	add_header 'Access-Control-Allow-Methods' 'GET, POST, PATCH, DELETE, PUT, OPTIONS';
             	add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,  Access-Control-Expose-Headers, Token, Authorization';
            	add_header 'Access-Control-Max-Age' 1728000;
            	add_header 'Content-Type' 'text/plain charset=UTF-8';
            	add_header 'Content-Length' 0;
            	return 204;
        	}
        	add_header 'Access-Control-Allow-Origin' '*' always;
        	fastcgi_pass    unix:/run/php7.0-fpm.sock;
        	include         snippets/fastcgi-php.conf;
        	include         fastcgi_params;
        	fastcgi_param   SCRIPT_FILENAME $document_root$fastcgi_script_name;
    	}
}
### Nginx 中 `add_header` 配置 CORS 头的作用 在 Web 开发中,浏览器出于安全考虑实施同源策略 (Same-origin policy),这阻止了一个源加载的文档或脚本获取来自另一个源的数据。为了实现不同源之间的资源共享(即请求),可以利用 HTTP 响应头部中的特定字段来放宽这些限制。 对于 Nginx 而言,在配置文件里通过 `add_header` 指令添加 `Access-Control-Allow-Origin` 字段能够指定哪些名被允许访问资源[^1]。具体来说: - 设置 `add_header Access-Control-Allow-Origin *;` 表明任何来源都可以发起对该服务端资源的成功预检请求并最终发送实际请求。 如果遇到某些情况下即使设置了上述指令仍然无法解决问题,则可能是因为该选项仅会在状态码为 20X 的响应中起效;而对于其他类型的返回码则不会自动附加此头信息。因此针对这种情况可以在较新版本 (>1.7.5) 的 Nginx 上直接应用 `add_header` 或者是在更早些版本上追加关键字 `always` 来确保无论何种情况都能正常工作[^4]。 下面是一个简单的例子展示如何在 location 块内加入相应的设置以支持 CORS 请求: ```nginx location /api/ { add_header 'Access-Control-Allow-Origin' '*'; 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 = 'OPTIONS') { return 204; } } ``` 这段配置不仅指定了所有来源都被许可 (`*`) ,还额外定义了可接受的方法列表以及自定义头部字段,并特别处理了预飞行请求(`OPTIONS`)[^2]。
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值