vue跨域解决方法
使用axios请求
第一步骤
在vue.config.js文件中module.exports={}中添加
devServer:{
proxy:{
'/profile':{//指定路径要跨域请求地址
//在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
//将/api开头的url转发到target上。
target:'',//跨域请求地址
changeOrigin:true,//虚拟的站点需要更管origin
ws:true,//代理websockets
secure:true,//如果是https接口，需要配置这个参数
pathRewrite:{
//顾名思义，将/api重写为/此时url变为而不是
'^/profile':''
}
}
}
第二步骤
在封装axios请求中设置
constservice=axios.create({
baseURL:'/profile',//定义要跨域的接口路径
withCredentials:true,//是否支持跨域
timeout:500000,//requesttimeout
headers:{
'Cache-Control':'no-cache',
'Content-Type':'application/x-www-form-urlencoded'
}
});
vue前端设置跨域多代理
在项目开发的时候经常会遇到后端提供的多个服务请求地址域名或端口号不一致的情况这时候就需要前端设置多个proxy跨域代理，本文以vue-element-admin为例展示步骤如下：
1:配置环境变量.env.development
2:配置项目根目录下的vue.config.js找到devServer
PS：注意VUE_APP_BASE_API放在数组的最后一个，如果你VUE_APP_BASE_API跟我一样设置为''的话，这样才不会被代理的虚拟path覆盖！
3:找到项目中管理请求地址的文件src/api/proxy.js（proxy.js是我随便起的名字?）
打开proxy.js
proxy_api就是你之前在步骤1：中定义的虚拟path
VUE_APP_BASE_API_PROXY='/proxy-api'
consturl=(path)=(proxy_api+path)一个路径处理函数，参数是'/xx/xxx/fetch/list'，return(proxy_api+path)
需要额外注意的是我在配置环境变量.env.development的时候基础api设置的是空：
所以不需要在src/utils/request.js中对代理的请求进行拦截
如果你为VUE_APP_BASE_API设置了虚拟path路径，那么就需要在src/utils/request.js为这个虚拟路径配置拦截，比较麻烦比不建议这么做。
至此跨域多代理已经设置完了，本文中设置两个代理一个基础代理VUE_APP_BASE_API，一个额外代理VUE_APP_BASE_API_PROXY，默认情况下走基础代理，当请求匹配到匹'/proxy-api'时走额外代理～
在vue项目中配置proxy解决跨域问题1.问题：
后端给的接口是：.前端在本地开发中调用该接口跨域。
2.解决方案：
*在webpack中配置proxy。如下图所示
如上：
1.target是你要代理的域名，必须要加上http。
2.这里用'/api'代替target里面的地址，组件中调用接口时直接用'/api'代替。比如我要调用'.直接写'/api/news'即可
3.changeOrigin必须为true
*在页面中请求写法如下：
开心吧。数据终于拿到啦！！！
我们知道，vue2.0项目中的static文件夹存储的是静态资源，可以直接被访问到的，如果我们将mock的数据放入static文件夹，在浏览器中直接访问发现是可以访问到数据的。于是我们在页面将mock数据的请求写成下面这样：
则需要在webpack中做如下配置：
注意这里的http一定不能省略，否则数据请求不到。这样做的好处是在本地开发时mock的接口和线上的接口一致，避免上线前大量改动接口名称。
logo设计
创造品牌价值
¥500元起
APP开发
量身定制，源码交付
¥2000元起
商标注册
一个好品牌从商标开始
¥1480元起
公司注册
注册公司全程代办
¥0元起
查
看
更
多
- 官方电话官方服务
- 官方网站八戒财税知识产权八戒服务商企业需求数字市场