3天精通nginx第二天-CORS跨域处理

跨域处理

CORS

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。cors的原理在这里我们就不详细介绍了，这里只介绍怎么使用nginx解决跨域问题。

网络访问过程

浏览器首次使用域名www.test.com加载html页面，然后在页面内由ajax方式向域名www.test.com.cn发起请求。此时问题出现：chrome拒绝执行ajax请求得到的返回值。

跨域的解决方案

• jsonp方案，需要前后端配合解决
• postMessage跨域
• nginx代理跨域等

nginx代理跨域解决方案

1.浏览器首先访问www.test.com8081,后端服务器返回要展现的html页面。
2.html页面中的ajax向www.test.com.cn:81服务器发起请求，当浏览器发现ajax请求的网址，与当前主域名不一致（跨域)时，会在请求header中追加值页面主域名值，即：Origin: http://www.test.com:8081

3.nginx在接收到ajax请求时，会查看origin值，即请求我的网址是谁？此处使用正则来校验，即：只要是www.test.com下的网址，都允许访问我返回信息时，nginx追加header值：Access-Control-Allow-Origin = www.test.com

server {
	listen       81;          # 服务端口
	server_name  localhost;   # 服务地址，多个用逗号分隔

	# 判断哪些跨域地址可以访问该服务
	if ( $http_origin ~ http://www.test.com){
                 set $allow_url $http_origin;
     }
	#是否允许请求带有验证信息
    add_header Access-Control-Allow-Credentials true;
    #允许跨域访问的域名,可以是一个域的列表，也可以是通配符* 或$http_origin
    add_header Access-Control-Allow-Origin  $allow_url;
    #允许脚本访问的返回头
    add_header Access-Control-Allow-Headers 'x-requested-with,content-type,Cache-Control,Pragma,Date,x-timestamp';
    #允许使用的请求方法，以逗号隔开
    add_header Access-Control-Allow-Methods 'POST,GET,OPTIONS,PUT,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"';
		 
    if ($request_method = 'OPTIONS') {
         return 204;
    }
	location / {
		proxy_pass http://www.test.com.cn:8082/;
	}
}

4. chrome收到ajax返回值后，查看返回的header中access-control-allow-origin的值，发现其中的值是www.test.com,正是当前的页面主域名。这是允许访问，于是执行ajax返回值内容。
   
   如果感觉这篇文章对您有帮助，可以给博主点赞、评论、收藏，这样是对博主最大的鼓励，谢谢。