什么是跨域(CORS)? 出现原因及解决方法

跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实施的安全限制。 这里说明一下,无法跨域是浏览器对于用户安全的考虑,如果自己写个没有同源策略的浏览器,完全不用考虑跨域问题了。是浏览器的锅,对。 同源策略限制了一下行为: Cookie、LocalStorage 和 IndexDB 无法读取 DOM 和 JS 对象无法获取 Ajax请求发送不出去。
在使用CDN的时候,很容易会遇到跨域的问题,当一个请求url的协议、域名、端口三者之间的任意一个与当前页面url不同即为跨域。

原因分析

序号跨域原因说明
1协议不同http://chenyu.me 与 https://chenyu.me
2域名不同chenyu.me 与 www.cctv.com
3域名相同,端口不同chenyu.me:8081 与 chenyu.me:8082
4二级域名不同blog.chenyu.me 与tools.chenyu.me 与 bbx.chenyu.me
关于跨域:即浏览器对于JavaScript的同源策略的限制

解决方案

宝塔面板网站面临跨域问题解决方案。

1、Nginx

打开网站的设置,找到配置文件,添加如下代码,添加完之后,需重启nginx。

add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods'  'GET, POST, OPTIONS';

20220819104528-1.webp

2、Apache

打开网站的设置,找到配置文件,添加如下代码

Header set Access-Control-Allow-Origin "*"

如果网站开启了ssl,注意有两处需要修改,添加完之后,需重启apache。

20220819104528-2.webp

20220819104528-3.webp

如果配置了发现没有生效,尝试清理浏览器缓存,如果网站有cdn,尝试清理cdn缓存。

备注

在需要跨域的静态资源域名的nginx配置里添加跨域配置,如果你是引用人家的静态资源,就用自己的域名反向代理,把这几行配置写到反向代理配置里。

如果要指定域名使用,不想让所有人都可以引用。

add_header 'Access-Control-Allow-Origin' 'https://chenyu.me';

本文部分内容借鉴于执念博客!感谢!

© 版权声明
THE END
如果喜欢,可以【点赞】【分享】【收藏】
点赞13赞赏 分享
评论 抢沙发
头像
非注册用户需审核通过后才能查看。友好交流,勿发纯表情,勿恶意灌水!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容