怎么在vue中利用vue-cli实现实现跨域调试接口?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
//,常用的命令//npm run dev 本地热更新模式
npm run build //生产模式,会在根目录下打包出一个dist文件夹,直接放在服务器上就可以使用了 开发阶段与后台同学进行数据交互(调试接口)本机与服务器之间会出现跨域问题
跨域报错
<强>解决办法
在<代码> npm运行dev>
直接上代码<代码>根目录/config/索引。js代码中,搜索<代码> proxyTable> proxyTable:, {
,,& # 39;/api # 39;:,{,//使用“/api"来代替“http://baidu.com"
目标:,,,,& # 39;http://baidu.com& # 39;,,//源地址
,,,changeOrigin:,真的,,//改变源
,,,pathRewrite:, {
,,,,& # 39;^/api # 39;:, & # 39;/& # 39;,//路径重写
,,,}
,,}
以前,} 这段代码的意思是用<代码>/api>
为了方便使用,需要不同环境下的不同配置
<代码>根目录/config/dev.env。js代码这里面是本地开发环境的配置
module.exports =,合并(prodEnv, {
,//你的其他的一些配置…
,//?
,//本地调试环境下的请求地址/api
,//对应代理的/api配置
,API_ROOT: & # 39;“/api" & # 39;
}) <代码>根目录/config/prod.env。js代码这里面是生产建环境的配置
module.exports =, {
,//你的其他的一些配置…
,//?
,API_ROOT: & # 39;“实际生产环境的请求地址“& # 39;
} <>强修改类似执行配置都需要
重新<代码> npm运行dev
重新<代码> npm运行dev
重新<代码> npm运行dev
配置完工后,我们找到<代码> src/main。js代码
这里用axios为例
import Vue 得到& # 39;vue # 39;
import axios 得到& # 39;axios& # 39;//,process.env.API_ROOT就得到了上面不同环境下的API_ROOT
const baseUrl =process.env.API_ROOT//,把baseUrl挂载到Vue原型上,方便组件内部使用
时间=Vue.prototype.baseUrl baseUrl;//,axios也挂载到原型上,美元。http就指向axios
Vue.prototype http 美元;=,axios; 好的,一切配置就绪,我们在任一地方就可以使用了
//,组件内使用axios//,不同的配置下,this.baseUrl的值就不同
这个。http.post美元($ {this.baseUrl}/aaa/xxx的,,{
,身份证:123
})(res =祝辞,{
,//请求成功……
}) <>强所有配置已完成
需要注意的是
本地环境下查看浏览器的网络
本地环境下,请求的ip地址变成了本机的ip,后面还会跟上一个<代码>/api>
例如浏览器上请求地址(这是代理地址)
<代码> 192.168.0.0:8080/api/xxx
但其实真正请求的地址是
<代码>根目录/config/索引。js配置的地址xxx> /
看完上述内容,你们掌握怎么在vue中利用vue-cli实现实现跨域调试接口的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注行业资讯频道,感谢各位的阅读!
