没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
vue((2.x,,3.0)配置跨域代理)配置跨域代理
主要介绍了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: { // 重定向地址
资源评论
weixin_38646902
- 粉丝: 3
- 资源: 921
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 论文(最终)_20240430235101.pdf
- 基于python编写的Keras深度学习框架开发,利用卷积神经网络CNN,快速识别图片并进行分类
- 最全空间计量实证方法(空间杜宾模型和检验以及结果解释文档).txt
- 5uonly.apk
- 蓝桥杯Python组的历年真题
- 2023-04-06-项目笔记 - 第一百十九阶段 - 4.4.2.117全局变量的作用域-117 -2024.04.30
- 2023-04-06-项目笔记 - 第一百十九阶段 - 4.4.2.117全局变量的作用域-117 -2024.04.30
- 前端开发技术实验报告:内含4四实验&实验报告
- Highlight Plus v20.0.1
- 林周瑜-论文.docx
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功