![](/assets/img/weixin-blog.311ae013.png)
技术咨询、项目合作、广告投放、简历咨询、技术文档下载
点击这里 联系博主
开发 vue 项目,大多数我们都是使用的vue-cli
,众所周知,我们在本地联调服务 API 时,会存在跨域问题。那么我们如何利用cli
解决跨域问题呢?
其实webpack
官网已有介绍dev-server#proxy (opens new window)。
如果你的前端应用和后端 API 服务器没有运行在同一个主机上,你需要在开发环境下将 API 请求代理到 API 服务器。
这个问题可以通过 vue.config.js
中的devServer.proxy
选项来配置。
module.exports = {
devServer: {
host: "localhost.company.com",
proxy: {
"/api": {
target: "http://www.example.org", // 目标服务器 host
changeOrigin: true, // 主要是这里:默认false,是否需要改变原始主机头为目标URL
ws: true, // 是否代理websockets
pathRewrite: {
"^/api/old-path": "/api/new-path", // 重写请求,比如我们源访问的是api/old-path,那么请求会被解析为/api/new-path
"^/api/remove/path": "/path" // 同上
}
}
}
}
};
- 本文链接: https://mrgaogang.github.io/vue/proxy.html
- 版权声明: 本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 许可协议。转载请注明出处!
← 如何全局显示工具栏 Jest测试结果分析 →