当一个网站是 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' '*';

Apache

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^https://(www\.)?abcdmn.com(/)?.*$ [NC]
RewriteCond %{HTTP_REFERER} !^https://abcdmn.com(/)?.*$ [NC]
RewriteCond %{HTTP_REFERER} !^https://(www\.)?keepmins.com(/)?.*$ [NC]
RewriteCond %{HTTP_REFERER} !^https://keepmins.com(/)?.*$ [NC]
RewriteCond %{HTTP_REFERER} !^https://(www\.)?dukeyin.com(/)?.*$ [NC]
RewriteCond %{HTTP_REFERER} !^https://dukeyin.com(/)?.*$ [NC]
RewriteRule .*\.(gif|jpg|png|mp3|ogg|mp4|ts|m3u8|m4v|lrc|m4a|vtt|zip|rar|7z|pdf)$ https://somgdomain.com/images/iosicon.png [R,NC,L]

上述配置允许了三个域名，带www和不带的时候。当引用域名不是这三个，则返回一个png地址。

#CORS #跨域