遇到跨域问题：Access to XMLHttpRequest at ‘xxx‘ from origin ‘null‘ has been blocke，该怎么办？

Posted 2021-10-27 Dian'C

来自专栏《BUG处理》

前言

❤️ 作者主页：https://hongweblog.blog.csdn.net/

❤️ 简介：没有什么远大的理想，做自己喜欢的事情就好~

❤️ 扫码关注微信公众号： Dianc-小助手

❤️ 前端学习路线图、面试刷题，Dianc小助手后续会持续完善。

❤️ 大家的积极参与和讨论，是Dianc推送更多优质内容的动力~

目录

• 前言
• • 起因
  • • 同源策略
    • 非同源限制
  • 博主遇到的问题
  • 如何解决
  • • vscode下载Live Server 实时预览
    • 还不够，你不想要vscode
  • 最后
• 热门推荐

---

起因

遇到这个问题，如果你是和博主一样因为ajax请求本地文件，一般是json。那么是可以解决的，其实报错最根本的原因不是代码错误，而是浏览器的安全不允许。

试想一下，如果一个本地网页文件或者说别人的网址能够访问到你其他文件的内容，那你隐私不就全暴露了吗，所以浏览器为了防止这种情况的发生。

同源策略

浏览器将采用 同源策略（Same Orgin Policy），它是一种约定，它是浏览器核心也最基本的安全功能，它会阻止一个域的js脚本和另外一个域的内容进行交互，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。。所谓同源（即在同一个域）就是两个页面具有相同的协议（protocol）、主机（host）和端口号（port）。

非同源限制

1. 无法读取非同源网页的cookie、localstorage等
2. 无法接触非同源网页的DOM和js对象
3. 无法向非同源地址发送Ajax请求

博主遇到的问题

利用Ajax请求本地的json文件出现错误，仔细观察报错，会发现并不是语法或者逻辑错误，仅仅是因为浏览器的安全保险。

好好利用好调试，你会发现挺好用的，点击网络刷新一下，就会发现请求文件的种种问题，所有都没问题，那么仔细看报错CORS（即同源请求错误）

如何解决

那么知道问题我们就应该去解决对吧，那么如何解决呢？

这里就不过多介绍其他花里胡哨的解决方法了，网上有一大堆教程（比如jsonp，nginx 代理服务器配置跨域，服务器端添加请求头等等。。）

这里我们就用最简单的方法，放在服务器端运行代码就好，就不要用本地访问不就能解决根本问题了吗，但是肯定有小伙伴说了，那我就是在本地测试/开发后续再往服务器里丢怎么解决，欸问到点上了。那我们创建一个本地服务器不就得了。

vscode下载Live Server 实时预览

不会有学前端的没有这玩意或者说没见过的吧，这插件就相当于在你代码内添加上一段js代码，然后生成一个实时刷新的网页环境，预览方式127.0.0.1:5500（默认地址）

看，这不就生成了一个本地的服务器吗

还不够，你不想要vscode

没问题，搭建本地环境还有一个方法，不是自己搭建iis昂，那多没意思是吧。直接下载phpstudy运行一个集成环境会省事很多，无论小白与否，都是非常适合的，内置很多环境插件，一键安装即可。

先下载Apache，然后点击网站，创建网站。。

完成之后，回到浏览器，输入localhost即可访问本地的网站了

最后

以上内容均博主真实遇到的事，开发一个方便自己的小脚本（保密），一时没注意同源跨域问题，导致这篇文章的横空出世，也是一个幸运吧，所以我就打算记录下来，下次再遇到形如这种 ”Access to XMLHttpRequest at ‘xxx’ from origin ‘null’ has been blocke“ 的报错就知道该怎么解决了。

写在最后，如果文章有帮助到你，希望可以给个三连支持一下噢，让更多人看到这篇文章。

谢谢了你嘞！

---

来自《往期优质文章》

热门推荐

🥇 这样配置学习VSCode，写前端代码想不快都难（❤️精心准备多动图，建议收藏噢~❤️）
🥈 还不会搭建个人博客?手把手教你用Wordpress搭建只属于你的世界~
🥉 Hexo的准备工作（手把手教你搭建Node.js/Git环境）