开发模式
要知道,跨域这个行为是浏览器禁止的,可是服务端并不由止。使用proxyTable的原理就是将域名发送给本地的服务器,再由本地的服务器去请求真正的服务器。json
打开config/index.js,修改dev里的proxyTableapi
proxyTable:{ '/': { target: 'http://www.xxx.cn/api', //你要访问的服务器域名 changeOrigin: true, //容许跨域 pathRewrite: { '^/': '' } } }
当你在别的页面请求时只要是/,你只须要/xx/xxx 它就会帮你处理成 http://www.xxx.cn/xx/xxx。
假如项目须要请求两个不一样的域名,proxytable在上面的基础上再增长,当请求时/json/xx/xxx开头的最后都会转换成http://www.aaa.cn/xx/xxx跨域
'/json': { target: 'http://www.aaa.cn/', //你要访问的服务器域名 changeOrigin: true, //容许跨域 pathRewrite: { '^/json': '' } }
但实际上接口是没有json的,这只是你用来区分请求的一个别名,这时pathRewrite就能够将/json去掉浏览器
生产环境
找到config/pro.env.js服务器
module.exports = { NODE_ENV: '"production"', API_ROOT: '"http://www.xxx.cn/"' }
在config目录下新建api.js文件url
const root = process.env.API_ROOT; //在开发模式下为会调用代理 export const getList = root + '/list'
这样配置后你能够直接在组件写请求的url不需再判断处于哪一个模式下,均可以跨域请求。代理