在 vue.config.js 项目中配置 proxy 解决跨域问题
在实现前端应用和后端 API 服务器没有运行在同一个主机上，需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。
在实现前端应用和后端 API 服务器没有运行在同一个主机上，需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。
module.exports = {
devServer: {
open: true,
host: 'localhost',
port: 8000,
https: false,
//以上的ip和端口是我们本机的;下面为需要跨域的
proxy: { //配置跨域
'/api': {
target: 'http://127.0.0.1:8000/api/', //这里后台的地址模拟的;应该填写你们真实的后台接口
ws: true,
changOrigin: true, //允许跨域
pathRewrite: {
'^/api': '' //请求的时候使用这个api就可以
}
}
}
}
}
/api 表示需要去匹配请求时的 url，然后替换成 target 的值：
比如你页面里是写的
axios.post('/api/list/gd')最终 node 去请求后台的地址实际是： http://127.0.0.1:8000/api/list/gd
以上这篇在 vue.config.js 项目中配置 proxy 解决跨域问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持芦苇派。
原创文章，作者：ECHO陈文，如若转载，请注明出处：https://www.luweipai.cn/html/1687946042/
相关推荐
-
深入理解position sticky 粘性定位
粘性定位可以被认为是相对定位和固定定位的混合（即元素子再跨越特定阈值前为相对定位，之后为固定定位）
-
vue3如何解决reactive()响应式对象初始化重新赋值
在 Vue 3 中，reactive 函数是 Composition API 的一部分，用于创建一个响应式对象。这意味着当你改变这个对象的属性时，任何依赖于这些属性的组件或计算属性都会自动更新。
-
满屏import优化方案之使用模块重导（Re-export）
在编写代码时，随着项目的扩大和功能的增加，我们往往会引入越来越多的外部库和模块，这就导致了import语句数量的激增。然而，过多的import语句不仅会使代码显得杂乱无章，还可能隐藏一些潜在的问题，如未使用的导入、导入顺序混乱等。
-
微信小程序封装公共弹窗dailog组件-UNIAPP篇
在小程序的开发过程中，会发现弹框这东西使用频率太高了，能不能封装一个公共组件呢~ 答案当然是能！！！ 开发思路借鉴了一下vant，有兴趣的同学可以，研究一下
