vue 生产环境配置多个域名

在项目中使用的是axios来发送请求

需求:

后台项目接口有多个域名,前端如何解决?

解决方案:

一、前端处理:
1.前端创建多个axios示例,每个示例配置不同的baseURL。
2.
二、后端处理:
1.配置nginx转发

Vue项目中,当我们需要同时处理来自不同域名的API请求时,可以配置多个代理。这通常通过修改 `vue.config.js` 文件完成。下面是一个详细的步骤指南以及示例代码。 ### 配置多个代理 #### 步骤 1: 创建或编辑 `vue.config.js` 如果你还没有创建该文件,在项目的根目录下新增名为 `vue.confifg.js` 的JavaScript文件。 #### 步骤 2: 添加多条proxy规则 在这个文件里加入类似如下的内容: ```javascript module.exports = { devServer: { proxy: { // 第一条规则:匹配所有以'/api'开头的请求路径 '/api': { target: 'http://backend-api.example.com', changeOrigin: true, pathRewrite: {'^/api': ''} }, // 第二条规则:匹配所有以'/fileservice'开头的请求路径 '/fileservice': { target: 'http://file-service.example.org', changeOrigin: true, secure: false, pathRewrite: {'^/fileservice': ''} } } } }; ``` **解释每部分功能:** - **target**: 指定目标服务器地址。 - **changeOrigin**: 设置是否改变原始主机头为目标url,默认值false。如果设置为true,则将本地host改为远程server host。 - **pathRewrite**: 可选字段,用于重写请求路径的一部分。这里我们移除前缀以便于后端能够准确解析路由。 - **secure**: 对应HTTPS链接验证情况(仅当目标是https的时候生效)。一般设成false避免自签名证书导致连接失败的问题发生。 完成上述操作之后重启开发环境即可看到效果! --- 请注意,虽然我们可以随意增加更多的代理项满足业务需求,但在实际应用过程中尽量保持简洁合理的架构设计原则尤为重要哦~
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值