vue-cli脚手架起项目，实现跨域方法和原理猜测

1 使用vue-cli建议项目名为myapp

$ vue init webpack myapp (vue-cli命令不具体描述)

$ yarn start ( 访问地址为：http://localhost:8080/#)

2 设置跨域

假设后台接口地址为 http://192.168.1.100:9000/api/users， 按下面步骤来设置跨域访问接口

修改myapp/config/index.js

找到proxyTable部分，修改为：

proxyTable: {

'/api': {

target: 'http://192.168.1.100:9000',//设置你调用的接口域名和端口号 别忘了加http

changeOrigin: true,

/* pathRewrite: {

'^/api': '/'//这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可，如果看不懂也可以不设置这里

}*/

}

然后发送请求，所请求的api地址由http://192.168.1.100:9000/api/users 改为向请求http://localhost:8080/api/users 发送请求

3 猜测原理

稍微寻了一下源码，发现有node，猜测跨域的原理为：

向http://localhost:8080/api/users 发送请求 -> config/index.js(proxyTable) 发现做了代理 ->node作为后台框架 向原地址http://192.168.1.100:9000/api/users发送请求并返回，从而实现跨域