当我还是一个前端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就满足需求，不会被后端阻塞。但是后期前后端联调的时候还是要使用代理避免跨域。
