vue(2.x,3.0)配置跨域代理
导语:首先,每一个前端开发人员都应该知道同源策略,同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源,所谓同源是指,域名,协议,端口相同。有一个不同时,都将请求不到资源,将无法“跨域”获取资源。

vue3.0
从最新版开始,首先是在所有请求的文件中写好请求
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
let apiCrfCod = Vue.axios.create({
method: 'GET',
baseURL: '/apis/'
})
let apiResource = Vue.axios.create({
method: 'GET',
baseURL: '/service/'
})
getServiceChannels: (opts) => {
return apiCrfCod({
url: '/rest/collection/getService/XXXX', // 此处写地址,不具体举例
params: {
...opts
}
})
}
在vue.config.js中配置代理
module.exports = {
baseUrl: '',
outputDir: 'dist',
devServer: {
// 配置服务器代理
proxy: {
"/apis": { // 代理接口前缀为/apis的请求
"target": 'https://www.baidu.com/', // 对应的代理地址
"secure": false, // 接受运行在https上,默认不接受
"changeOrigin": true, // 如果设置为true,那么本地会虚拟一个服务器接收你的请求并代你发送该请求,这样就不会有跨域问题(只适合开发环境)
"pathRewrite": { //重写路径 比如'/apis/aaa/ccc'重写为'/aaa/ccc'
'^/apis': ''
}
},
// 配置多个代理
"/service": {
"target": 'https://www.google.com/',
"secure": false,
"changeOrigin": true,
},
}
},
}
vue2.X
请求还是按上述代码,下面是配置代理部分
在config文件夹下的index.js中,配置proxyTable,原本的proxyTable中为空

proxyTable: {
'/apis': {
target: "https://www.baidu.com/", // 目标地址
changeOrigin: true, // 是否跨域
pathRewrite: { // 重定向地址
'^/apis': ''
}
}
},
上述就是vue3.0和2.x的配置跨域部分,记得配置完代理需重启项目!!!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
这篇文章主要介绍了vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2018-10-10
关于vue的element-ui web端引入高德地图并获取经纬度
这篇文章主要介绍了关于vue的element-ui web端引入高德地图并获取经纬度,高德地图首先要去申请key和密钥,文中提供了部分实现代码和解决思路,感兴趣的朋友可以学习一下2023-04-04
使用Vue3和Echarts 5绘制带有立体感流线中国地图(推荐收藏!)
最近接到一个需求是做一个中国地图,下面这篇文章主要给大家介绍了关于如何使用Vue3和Echarts 5绘制带有立体感流线中国地图的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
Vue项目localhost:8080无法访问此网站,拒绝了我们的连接请求的解决方案
前端页面使用的是vue,vue项目启动成功,没有任何报错,服务控制台已出现APP访问地址,点击访问地址出现无法访问此网站,拒绝了我们的连接请求,所以本文给大家介绍了Vue项目localhost:8080无法访问此网站,拒绝了我们的连接请求的解决方案,需要的朋友可以参考下2024-12-12


最新评论