Vue ajax跨域请求
Vue webpack-dev-server实现跨域请求
思路
配置webpack-dev-server,代理某一个路径到目标路径,同是更改源和重写
Vue里定义一个全部变量:site
Vue.prototype.site = '/api/';
此后发送的ajax请求都使用此变量来组合(为了方便管理,当需要更改时直接更改次变量)
设置webpack的代理和重写
在 config/index.js里修改dev选项
dev: {
env: require('./dev.env'),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api':{
target:'http://xxxx.com/api',
changeOrigin:true,
pathRewrite:{
'^/api':''
}
}
},
主要看proxyTable选项:
/api 是要代理的目录,target 是目标URL,即后台接口的真正位置
changeOrigin 为是否修改源,当时用ajax且跨域测试时需为true
pathRewrite 为路由重定向
工作流程:
当检测到有URL请求且是/api 路径时就修改请求URL,把请求URL中的/api 替换为target里的值,同时改变源让浏览器认为不是跨域请求
example: 我发送一个ajax请求,路径为 /api/test.php ,那修改后真实请求的url就是 http://xxxx.com/api/test.php
注意 因为部署到服务器上时不再使用webpack,所以你需要修改ajax请求的url,当你使用之前说的全局变量时只需要修改下全局变量就好
,更好的实践是根据部署代码的位置和后台api的未知来设置需要代理的路径
假如部署的前端代码index.html在根目录下,后台api在/test/下,那么把代理路径设置为/test更胜一筹
此博客出自稻草人LXB,转载请注明原文地址
博客地址:http://www.cnblogs.com/scarecrowlxb/
个人网址:https://www.bingxl.cn
邮箱: scarecrowlxb@qq.com
博客地址:http://www.cnblogs.com/scarecrowlxb/
个人网址:https://www.bingxl.cn
邮箱: scarecrowlxb@qq.com
![](http://rescdn.qqmail.com/zh_CN/htmledition/images/function/qm_open/ico_mailme_01.png)