前端开发跨域调试骚操作

在平时工作中，前端调试接口跨域等问题，其实是令人头大的事情。尤其是当一台服务器从后端返回的数据暂时不能调整响应头导致的跨域问题，跟大家分享几种跨域调试的办法。

概念

讲清楚解决问题之前，先讲讲问题的产生原因（有基础的可以跳过这段）。

前端处于安全考虑，禁止向其他页面擅自发送请求，否则将导致严重的安全问题，例如调用了另外一个网站的接口把钱转走了，这个可是很危险的事情！基于此，也就经常看到了你的一些请求被 block 掉了。那么怎么才算跨域呢？

类型值

协议http/https

主机名juejin.im

端口号80

三者只要一个不同，就算是跨域。

跨域项目常规调试方法汇总

常规的套路网上满天飞，jsonp，利用nginx代理，webpack里面代理，nodejs搞个express等等之类的，这些已经别人已经说够多了，我这里分享一些我自己的简单骚操作，我认为更加简单粗暴效果快。

利用 chrome 启动参数

利用 chrome 启动参数无疑是最方便快捷的办法，直接关闭掉跨域限制。

首先为了安全起见（严重建议不要一直开着它浏览网页等日常，有安全风险！），我们在chrome浏览器右上角，新建一个测试用户，这时桌面会多出来一个快捷方式，对着这个快捷方式，我们属性里面更改它的目标：

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"--disable-web-security --user-data-dir="c:/MyChromeDevUserData"复制代码

可以看到我后面加了两个参数，第一个是 --disable-web-security 这里就是关闭跨域的关键，然后我一般会设置一个用户目录，存放 chrome 产生的数据。 然后打开这个链接，会发现，一个全新的可以跨域的浏览器就完成了。它还可以加载本地文件哦~ 同时，思维再发散一下~ chrome 直接当个小爬虫工具它不香么~一把梭哈。

利用chrome开发工具

首先打开F12开发者工具，点击到Sources>>Overrides。

这个是谷歌开发者工具自带的一个资源代理工具，可以理解为，它能够把内容代理到本地文件，例如图片，get，post请求等等。这样就很方便了，我们在本地新建一个json文件，它都能直接读到，代理我们的get和post请求。

模拟请求接口，如果接口携带参数，用%3f来替换问号当做文件名，例如https://www.baidu.com/sugrec?prod=pc_his 则文件名应该为sugrec%3fprod=pc_his 注意放在www.baidu.com 目录下。重新发起请求，就发现页面内容被代理到了本地。

post请求也可以代理，但是要注意，例如：http://xxx.cn/xxx/ 对应的代理文件可以这样写 xxx.cn/xxx/index.html 这样的话，就被代理到了html文件了，因为post有时候是根路径，所以需要稍微变通下办法。

利用chrome插件

谷歌插件里面，给予了强大的跨域权限（而且如果你登录，它还携带状态），利用这个神奇的特性，我们可以做一个非常简单的 demo 插件。甚至可以对请求，cookie等进行改写操作。代理就更别说了。而谷歌插件背后运行的 background.html 就可以进行跨域了,我们利用插件的消息传递就可以完成平时的跨域请求。关于这里的插件方面的讲解，可以移步插件大佬的文章：【干货】Chrome插件(扩展)开发全攻略。

我目前是在职前端开发，如果你现在也想学习前端开发技术， 在入门学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题， 你都可以申请加入我的前端学习群：1017810018里面聚集了一些正在自学前端的初学者裙文件里面也有我做前端技术这段时间整理的一些前端学习手册，前端面试题， 前端开发工具，PDF文档书籍教程，需要的话都可以自行来获取下载。