• 如果您觉得本站还有点用,那么赶紧使用Ctrl+D 收藏吧
  • 热烈庆祝图库功能上线,具体请看站长公告
  • api接口慢慢研发中,具体请看发布页:接口发布页

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

应用教程 窝主 1个月前 (12-14) 79次浏览 0个评论 二维码
文章目录[隐藏]

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

$.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:* 其中*就是通用匹配字符,表示允许任何域名跨域访问。你也可以允许指定的域名可以访问资源文件。

如果遇到其他错误,还可以添加对应的头内容,不知道的就全加上就好了; :grin:
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’问题解决! :smile:


二次元圈子, 版权所有
转载请注明原文链接:解决“No ‘Access-Control-Allow-Origin’”
喜欢 (1)
[扫一扫投喂本站]
分享本页面
窝主
关于作者:
作者简介:咕咕咕

您必须 登录 才能发表评论!

正在获取,请稍候...
00:00/00:00

播放器
换装