前端开发跨域的终极解决方案记录

当我还是一个前端newbie的时候，开发的时候在本地localhost某个端口跑着我的开发服务器，而数据来源于云主机的API服务器，开发的时候经常被跨域的问题阻塞。

某一天，终于开窍了，可以使用proxy代理。开发服务器通过某种手段,如http-proxy-middleware代理了开发中web app发出的请求，那么所以需要传递的cookie，json，header都可以无障碍的传递到服务器，不会产生恼人的405，500。

大部分脚手架是通过http-proxy-middleware这个工具来实现代理
see@https://webpack.js.org/configuration/dev-server/

vue-cli webpack的proxyTable配置

// /config/index.js(webpack)

module.exports = {
  build: {
    ...
  },
  dev: {
    ...
      proxyTable: {
          '/api': {
            target: 'http://api-server.com/',
            changeOrigin: true,
            // secure: false,
            // pathRewrite: {"^/api" : ""}
          }
      },
    ...
  }
}

// or webpack.cofig.js (webpack-simple)

module.exports = {
  ...
  devServer: {
    proxy: {
      "/api": {
        target: "http://api-server.com/",
        changeOrigin: true
      }
    }
  }
  ...
}

这样设置过后，当你希望请求http://api-server/api/v1/login的时候

你可以在你的代码中这样写

request({
  url: '/api/v1/login'
})

这段代码意思是请求服务器根目录的api/v1/login,这样写到了生产环境也不需要修改代码，同时在开发的时候代理了到API server/api开始的所有请求。perfect！

注意： 一定是代理/api或这样的某一个子路径，如果直接代理/,那页面也会被代理，从而返回服务器的/.

dva@roadhog 配置代理

// .roadhogrc

{
  "env": {
    "development": {
      "proxy": {
        "/api": {
          "target": "http://api-server",
          "changeOrigin": true,
        }
      }
    }
  }
}

create-react-app 中的配置

create-react-app 貌似不是一个优秀的脚手架。现在只能配置一个代理.但勉强还是够用
see@https://github.com/facebookincubator/create-react-app/pull/1790

// package.json
"proxy": "http://localhost:xxxx"

updated 2017年04月25日
现在开始为博客系统搭建后台了，使用了Angular+自制css,项目是用angular-cli生成的，当然也需要设置代理跨域。

// proxy.config.json
{
  "/api/*": {
    "target": "http://localhost:5000",
    "logLevel": "debug",
    "changeOrigin": true
  }
}

// package.json
{
 "scripts" : {
   "start": "ng serve --open --proxy-config=proxy.config.json",
 }
}

然后使用nm start重启应用就可以尽情的开发了。
当然原理和上面的集中方式相同，只不过这里是命令行指定配置文件路径。

总结

As time goes by.我逐渐意识到开发中如何避免跨域的问题的终极奥义了。

如果你是全栈开发者或者你的团队都是全栈开发者，这意味着你既写接口也写页面，这样页面和接口是同步开发的，但我猜想大部分情况应该不会这样吧，大部分情况是个人的side project。可以使用代理来避免跨域。

如果你是前端重构，后端接口已经写好了，那么完全可以使用代理跨域，不需要使用mock。

如果你的团队是前后端并行开发，后端写接口的同时你开发页面，这时候使用mock就满足需求，不会被后端阻塞。但是后期前后端联调的时候还是要使用代理避免跨域。