这一次，搞定开发阶段的跨域调试

2018-01-09

受限于同源策略的制约，开发阶段的跨域调试，一直是前端不可避免的问题，以前使用JSONP或者CORS的方式，都需要后端配合才能搞上一搞，可是大家都很忙的，还是自己动脑吧！

接下来介绍三种方式，由简单到复杂：

一、禁用同源策略

既然受限于它，那么关掉它不就好了，简单粗暴。

启动浏览器的时候添加一个参数--disable-web-security 就好，简单到哭。

本例只针对chrome浏览器

1.Windows

桌面浏览器图标右键查看属性，选中快捷方式标签，在目标一栏添加启动参数即可： windows

2.mac

关掉所有chrome窗口，然后执行命令：


> open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/用户名/MyChromeDevUserData

要是觉得一大串难记的话就再弄个alias简直不要太爽

二、服务器转发请求

同源策略是针对于浏览器的，使用服务器发送请求并不会受到它的制约。 在使用vue-cli做开发，初始化项目选定template为webpack时，添加一个简单的配置即可实现：


// config/index.js
module.exports = {
  // ...
  dev: {
    proxyTable: {
      // 代理所有的 /api 请求到 jsonplaceholder
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

例如请求/api/getData，实际请求http://jsonplaceholder.typicode.com/getData

这个方式的实现原理是使用了NodeJS的http-proxy-middleware 模块。 当检测到对应的请求后，该模块会虚拟一个服务端接收你的请求，然后帮你代发给目标服务器，这样就避免了同源策略。

三、正向代理

配置正向代理将目标服务器的资源映射为本地资源。

这里我使用了工具whistle，它的优势在于跨平台和功能强大。

1.使用whistle

安装
> npm install -g whistle

启动
> w2 start

退出
> w2 stop
2.配置代理

安装浏览器代理插件whistle-for-chrome

打开插件，点击create新建一个test分组，然后配置hosts如下： windows 假设现在有一个example.com页面，example.com页面里会请求example.com/getData拿数据。

现在我们访问example.com，请求会被转发到本地的8080端口

我们设置8080端口里的页面向example.com/getData发起请求，example.com检查请求头的host字段，发现是example.com，没有跨域，就会将结果返回给浏览器，实现跨域调试。

← 返回