当一个网站是 a.com, 另一个网站是 b.com,如果我们在a站 放了一个存储在b站的图像链接,假如b站没有声明说允许a站使用,那么在a站就会出现错误,无法显示位于b站的这个图像乃至任何资源。
这就是跨域错误。
Access to [Something] at ‘https://a.com/h.jpg’ from origin ‘https://a.com’ has been blocked b CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
两个不同域名、根域名和子域名、同一个域名的不同端口、同一个域名的不同协议,都会被认为是“不同域”,之间分享调用,都会受到CORS跨域政策的限制。
要彻底解决跨域问题,只能在源站上配置,也就是资源所在的站点,上述例子中的b站。
在b站的“配置文件” server{} 中添加如下几行,即可让b站允许a站使用其资源或者发起get post option请求。
add_header 'Access-Control-Allow-Origin' 'https://a.com';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';
意思就是对于a站出来的任何内容,都加入一个头部信息,说我是允许b站拿资源的。
但是比较坑的是,’Access-Control-Allow-Origin’这个属性只允许一个值,也就是不能同时允许多个网站。
加入我们建了个图床,想用在多个网站上,岂不是很郁闷?
解决方法(Nginx)是:
map $http_origin $corsHost {
default 0;
"~https://a.com" https://a.com;
"~http://c.com" http://c.com;
}
server
{
listen 80;
server_name b.com;
root /nginx;
location /
{
add_header Access-Control-Allow-Origin $corsHost;
}
}
假如 ‘Access-Control-Allow-Origin’ 设置为 ‘*’,则允许任何网站调用资源。
add_header 'Access-Control-Allow-Origin' '*';
#CORS #跨域