解决“No ‘Access-Control-Allow-Origin’”

文章目录[隐藏]

什么是跨域：
跨域访问解决

因为背景使用的是6张来自新浪图床的图片，但是本站并不是ajax刷新的页面，所以每次访问都会访问接口获取新的图片链接，这就导致每次都必须重新下载新的图片，就很占用网络资源，虽然想要这个背景效果，但是这又会导致网站加载很不友好，俗话说的没错：“鱼与熊掌，不可兼得”，所以就决定只加载一次img，后面访问的时候就用第一次加载的图片地址，前期想的是利用php操作session会话文件来解决这个问题，但是后来觉得还是不太直观，又用php操作cookie来控制，虽然是成功了，但是我看接口访问日志，这时候全是服务器自身的请求，而且非常频繁，找原因也找不到，另一方面，想着到时候资源服务站出现问题，php哪里执行就会卡住，那将会很脑壳痛，再接着就发展到了用前端js操作cookie了，别说，还真香！，但是在使用过程中遇到了一个问题，就是跨域请求。

$.ajax({
url: 'xxx',
type: 'get',
async:false,...............

js报错：

has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is

我们先来了解一下

什么是跨域：

在A网站中，我们希望使用Ajax来获得B网站中的特定内容。如果A网站与B网站不在同一个域中，那么就出现了跨域访问问题。你可以理解为两个域名之间不能跨过域名来发送请求或者请求数据，否则就是不安全的。跨域访问违反了同源策略，
同源策略规定，浏览器的ajax只能访问跟它的HTML页面同源（相同域名或IP）的资源。
当使用ajax访问远程服务器时，请求失败，浏览器报如上错误。这是出于安全的考虑，默认禁止跨域访问导致的。

跨域访问解决

有修改服务器配置的方案、有修改源文件的方案。

a网站访问b网站资源，我们就操作b网站：

修改服务器配置：

阿帕奇：

<IfModule mod_headers.c>
<FilesMatch "\.(文件类型)$">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>

Nginx：

location ~* \.(文件类型)$ {
   add_header Access-Control-Allow-Origin '*';
}

Access-Control-Allow-Origin:* 其中*就是通用匹配字符，表示允许任何域名跨域访问。你也可以允许指定的域名可以访问资源文件。

如果遇到其他错误，还可以添加对应的头内容，不知道的就全加上就好了；
Access-Control-Allow-Methods" "GET, POST, OPTIONS, HEAD"; Access-Control-Allow-Headers" "Authorization, Origin, X-Requested-With, Content-Type, Accept";

上面说的是改变服务器配置文件，接下来说修改源文件解决这个问题，我使用的是php 我就用php的作为一个demo，
在你所请求的头文件上加上

header('content-type:application:json;charset=utf8');
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:POST');
header('Access-Control-Allow-Headers:x-requested-with,content-type');

如果是请求资源文件，例如mp3、mp4、flv，可以选择请求一个php文件，然后发送资源，也可以直接修改服务器配置文件。

至此，No ‘Access-Control-Allow-Origin’问题解决！