Nginx通过CORS实现跨域

在nginx.conf里面,找到server项,并在里面添加如下配置

map $http_origin $corsHost {
 ? ?default 0;
 ? ?"~http://www.example.com" http://www.example.com;
 ? ?"~http://m.example.com" http://m.example.com;
 ? ?"~http://wap.example.com" http://wap.example.com;
}

server
{
 ? ?listen 80;
 ? ?server_name www.example2.com;
 ? ?root /usr/share/nginx/html;
 ? ?location /
 ? ?{
 ? ? ? ?add_header Access-Control-Allow-Origin $corsHost;
 ? ?}
}

• 方法二

如需要允许用户请求来自localhost、www.example.com或m.example.com的请求访问xxx.example2.com域名时,具体配置如下

在Nginx配置文件中xxx.example2.com域名的location /下配置以下内容

set $cors '';
if ($http_origin ~* 'https?://(localhost|www.example.com|m.example.com)') {
 ? ? ? ?set $cors 'true';
}

if ($cors = 'true') {
 ? ? ? ?add_header 'Access-Control-Allow-Origin' "$http_origin";
 ? ? ? ?add_header 'Access-Control-Allow-Credentials' 'true';
 ? ? ? ?add_header 'Access-Control-Allow-Methods' 'GET,DELETE,OPTIONS';
 ? ? ? ?add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,If-Modified-Since,Keep-Alive,X-Requested-With';
}

if ($request_method = 'OPTIONS') {
 ? ? ? ?return 204;
}

• 方法三

如需要允许用户请求来自*.example.com访问xxx.example2.com域名时,具体配置如下

在Nginx配置文件中xxx.example2.com域名的location /下配置以下内容

if ( $http_origin ~ http://(.*).example.com){
 ? ? ? ? set $allow_url $http_origin;
 ? ?}
 ? ?#CORS(Cross Orign Resource-Sharing)跨域控制配置
 ? ?#是否允许请求带有验证信息
 ? ?add_header Access-Control-Allow-Credentials true;
 ? ?#允许跨域访问的域名,可以是一个域的列表,也可以是通配符*
 ? ?add_header Access-Control-Allow-Origin $allow_url;
 ? ?#允许脚本访问的返回头
 ? ?add_header Access-Control-Allow-Headers 'x-requested-with,content-type,Pragma,Date,x-timestamp';
 ? ?#允许使用的请求方法,以逗号隔开
 ? ?add_header Access-Control-Allow-Methods 'POST,GET,DELETE';
 ? ?#允许自定义的头部,以逗号隔开,大小写不敏感
 ? ?add_header Access-Control-Expose-Headers 'WWW-Authenticate,Server-Authorization';
 ? ?#P3P支持跨域cookie操作
 ? ?add_header P3P 'policyref="/w3c/p3p.xml",CP="NOI DSP PSAa OUR BUS IND ONL UNI COM NAV INT LOC"';

• 方法四

如需要允许用户请求来自xxx1.example.com或xxx1.example1.com访问xxx.example2.com域名时,具体配置如下

在Nginx配置文件中xxx.example2.com域名的location /下配置以下内容

location / {

 ? ?if ( $http_origin ~ .*.(example|example1).com ) {
 ? ?add_header Access-Control-Allow-Origin $http_origin;
 ? ?}
}

实例三：Nginx跨域配置并支持DELETE,PUT请求

默认Access-Control-Allow-Origin开启跨域请求只支持GET、HEAD、POST、OPTIONS请求,使用DELETE发起跨域请求时,浏览器出于安全考虑会先发起OPTIONS请求,服务器端接收到的请求方式就变成了OPTIONS,所以引起了服务器的405 Method Not Allowed.

解决方法

首先要对OPTIONS请求进行处理

if ($request_method = 'OPTIONS') { 
 ? ?add_header Access-Control-Allow-Origin *; 
 ? ?add_header Access-Control-Allow-Methods GET,OPTIONS;
 ? ?#其他头部信息配置,省略...
 ? ?return 204; 
}

当请求方式为OPTIONS时设置Allow的响应头,重新处理这次请求.这样发出请求时第一次是OPTIONS请求,第二次才是DELETE请求.

# 完整配置参考
# 将配置文件的放到对应的server {}里

add_header Access-Control-Allow-Origin *;

location / {
 ? ?if ($request_method = 'OPTIONS') { 
 ? ? ? ?add_header Access-Control-Allow-Origin *; 
 ? ? ? ?add_header Access-Control-Allow-Methods GET,OPTIONS;
 ? ? ? ?return 204; 
 ? ?}
 ? ?index index.php;
 ? ?try_files $uri @rewriteapp;
}

实例四：更多配置示例

• 示例一

The following Nginx configuration enables CORS,with support for preflight requests.

#
# Wide-open CORS config for nginx
#
location / {
 ? ? if ($request_method = 'OPTIONS') {
 ? ? ? ?add_header 'Access-Control-Allow-Origin' '*';
 ? ? ? ?add_header 'Access-Control-Allow-Methods' 'GET,OPTIONS';
 ? ? ? ?#
 ? ? ? ?# Custom headers and headers various browsers *should* be OK with but aren't
 ? ? ? ?#
 ? ? ? ?add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,X-Requested-With,Content-Type';
 ? ? ? ?#
 ? ? ? ?# Tell client that this pre-flight info is valid for 20 days
 ? ? ? ?#
 ? ? ? ?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-Methods' 'GET,OPTIONS';
 ? ? ? ?add_header 'Access-Control-Allow-Headers' 'DNT,Content-Type';
 ? ? }
 ? ? if ($request_method = 'GET') {
 ? ? ? ?add_header 'Access-Control-Allow-Origin' '*';
 ? ? ? ?add_header 'Access-Control-Allow-Methods' 'GET,Content-Type';
 ? ? }
}

• 示例二

if ($request_method = 'OPTIONS') { ?
 ? ?add_header 'Access-Control-Allow-Origin' 'https://docs.domain.com'; ?
 ? ?add_header 'Access-Control-Allow-Credentials' 'true'; ?
 ? ?add_header 'Access-Control-Allow-Methods' 'GET,PATCH,OPTIONS'; ?
 ? ?add_header 'Access-Control-Allow-Headers' 'DNT,token'; ?
 ? ?return 204;
}
if ($request_method = 'POST') { ?
 ? ?add_header 'Access-Control-Allow-Origin' 'https://docs.domain.com'; ?
 ? ?add_header 'Access-Control-Allow-Credentials' 'true'; ?
 ? ?add_header 'Access-Control-Allow-Methods' 'GET,token'; ?
} ?
if ($request_method = 'GET') { ?
 ? ?add_header 'Access-Control-Allow-Origin' 'https://docs.domain.com'; ?
 ? ?add_header 'Access-Control-Allow-Credentials' 'true'; ?
 ? ?add_header 'Access-Control-Allow-Methods' 'GET,token'; ?
}

其它技巧

Apache中启用CORS

（编辑：厦门网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!