跨域引用文件时CORS错误

问题描述

提示：这里描述项目中遇到的问题：

跨域引用css样式文件时报CORS错误。

原因分析：

1.什么是跨域

由于浏览器的同源策略，限制从一个源加载的文档或脚本与来自另一个源的资源进行交互。只有同时满足【协议相同】、【端口相同】、【主机相同】3个条件，才能叫同源。

只要有一个条件不满足，即为跨域。

2.常见跨域情况

• 网络协议不同，如http协议访问https协议 ;
• 端口不同，如80端口访问8080端口 ;
• 域名不同，如www.test1.com访问www.test2.com ;
• 子域名不同，如abc.test1.com访问def.test1.com ;

---

解决方案：

1. 对所有跨域请求都放过的配置

location /xxx {  
	add_header Access-Control-Allow-Origin *;
	add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
	proxy_pass http://xxx.xxx.xxx;
}

2. 对指定开头的域名跨域请求都放过的配置

location /xxx {  
	add_header Access-Control-Allow-Origin *.xxx.com;
	add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
	proxy_pass http://xxx.xxx.xxx;
}

3. 对指定多个域名跨域请求都放过的配置（亲测可用）

location /xxx {  
	if ($http_origin ~ 'https://test.123.com'){  
		add_header Access-Control-Allow-Origin $http_origin;  
		add_header Access-Control-Request-Method GET;
	} 
	if ($http_origin ~ 'https://test.321.com'){  
		add_header Access-Control-Allow-Origin $http_origin;  
		add_header Access-Control-Request-Method GET;
	}
	proxy_pass http://xxx.xxx.xxx/api;
}