Nginx | Nginx之跨域配置(CORS)

Nginx-跨域配置(CORS)CORS什么是CORS ? CORS是一个W3C的标准,全称是跨域资源共享(Cross-origin resource sharing). 他允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而客服了AJAX只能同源使用的限制.当前几乎所有的浏览器都可以通过CORS的协议支持AJAX跨域调用.简单来说就是跨域的目标服务器要返回的一系列的Headers,

一介草民丶

20073人浏览 · 2021-10-19 17:30:53

一介草民丶 · 2021-10-19 17:30:53 发布

Nginx之跨域配置

1. 注意
2. CORS
3. Nginx通过CROS 实现跨域
4. 配置信息 nginx.conf 中

1. 注意

服务端口不能与代理端口一致端口会冲突
服务本身做了跨域处理 nginx 就不用在处理跨域了

2. CORS

什么是CORS ? CORS是一个W3C的标准,全称是跨域资源共享(Cross-origin resource sharing). 他允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而客服了AJAX只能同源使用的限制.
当前几乎所有的浏览器都可以通过CORS的协议支持AJAX跨域调用.
简单来说就是跨域的目标服务器要返回的一系列的Headers,通过这些Headers来通知是否同意跨域.

3. Nginx通过CROS 实现跨域

#设置Origin:表示服务器可以接受的请求 * 代表所有请求
add_header Access-Control-Allow-Origin 
#设置跨域请求是否允许发送Cookie,true 支持 false不支持
add_header Access-Control-Allow-Credentials
#设置跨域支持的请求类型 GET,POST,PUT,DELETE,OPTIONS
add_header Access-Control-Allow-Methods 
#设置跨域请求允许的Headers  头信息字段,以逗号分割的字符串
add_header Access-Control-Allow-Headers

4. 配置信息 nginx.conf 中

任意跨源请求都支持

任意跨源请求都支持
 server {
        listen      8080;
        server_name  localhost;
        
		#*星号代表任意跨源请求都支持
        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  'token,DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,XRequested-With';
		if ($request_method = 'OPTIONS') {
			return 200;
		}
	
	location /appmains {
            proxy_pass http://appmainsserver;
        }

    }

多个请求地址白名单配置

多个请求地址白名单配置
server {
        listen      8080;
        server_name  localhost;

		#设置变量 $cors_origin
        set $cors_origin "";
		#请求地址匹配格式  用来控制http请求地址 设置跨域白名单
        if ($http_origin ~ "https:www.baidu.com") {
            set $cors_origin $http_origin;              
        }	
		if ($http_origin ~ "www.test.com") {
            set $cors_origin $http_origin;              
        }
		if ($http_origin ~ "www.test1.com") {
            set $cors_origin $http_origin;              
        }		
        add_header Access-Control-Allow-Origin '$cors_origin';  
        add_header Access-Control-Allow-Credentials "true";
		add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
		add_header Access-Control-Allow-Headers  'token,DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,XRequested-With';
		if ($request_method = 'OPTIONS') {
			return 200;
		}
	
	location /appmains {
            proxy_pass http://appmainsserver;
        }

    }

指定格式的请求地址跨域

指定格式的请求地址跨域
 server {
        listen      8080;
        server_name  localhost;

		#设置变量 $cors_origin
        set $cors_origin "";
		#请求地址匹配格式  用来控制http请求地址 设置跨域白名单
        if ($http_origin ~ "http://(.*).baidu.com$") {
            set $cors_origin $http_origin;              
        }	

        add_header Access-Control-Allow-Origin '$cors_origin';  
        add_header Access-Control-Allow-Credentials "true";
		add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
		add_header Access-Control-Allow-Headers  'token,DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,XRequested-With';
		if ($request_method = 'OPTIONS') {
			return 200;
		}
	
	location /appmains {
            proxy_pass http://appmainsserver;
        }

    }