axios 请求其他服务器地址时候 会自动加上当前网址域名

在Vue2的生产环境中,由于.env.production配置文件中的requestUrl变量后多了一个空格,导致请求地址被解析为字符串,影响了HTTP请求。正确做法是确保环境变量配置无误,移除多余的空格。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

场景还原:


Vue2项目中在生产环境调用其他服务器请求地址时候会在请求地址默认加上一串当前浏览器域名
比如生产环境:http://123.com.cn;
生产环境服务器:http://789/production:20;
请求地址:http://789/production:21/postrRequest;
在生产环境发起请求时候请求地址会变为:http://123.com.cn/'http://789/production:21'/postrRequest;

配置:


请求地址是在.env.production文件中的requestUrl
请求发起是直接使用request.post(`${process.env.requestUrl}/postrRequest`).post()

解决过程:


在网上找了一些,但看起来不符合我的应用场景,所以记录一下
首先排除错误原因,请求方式是对的,request方法也是单独写的,所以只可能是请求地址出问题了;
参考vue-cli文档  文档地址

错误原因:


因为.env.production 配置文件中的requestUrl多接了一个空格;
严格来说 一个环境文件只包含环境变量的“键=值”对;
所以一个空格都不能多,不然vue-cli 就解析不到地址,只能解析出来是一串字符串,因此在request请求时候地址就变字符串了

.env.production配置项

# 注意引号前后都不能有空格
requestUrl = 'http://789/production:21'

Vue 使用 Axios 请求本地 API 接口时,如果遇到本地服务器自动拼接 URL 的情况,这通常是因为你的前端应用试图通过相对路径来访问资源,而这个相对路径是在浏览器环境中相对于当前页面的。当部署到本地服务器(如 `localhost` 或 `file:///` 协议)时,由于安全限制,浏览器不会允许跨源访问,所以默认情况下会禁止直接访问其他域名下的文件。 解决这个问题有几种方法: 1. **使用绝对URL**:将 API 地址修改为完整的 http(s):// 地址,这样无论在哪种环境下都能正确指向。 ```javascript axios.get('/api/data', { // 如果你的 API 存在于同一目录下 baseURL: 'http://localhost:8080' // 或者你的服务器实际地址 }) ``` 2. **设置CORS**:如果你能控制后端API,可以在服务器上启用 Caching-Control 和 Access-Control-Allow-Origin 头部信息,允许跨域访问。 3. **使用代理(Proxy)**:在 Vue 应用的配置文件(例如 vue.config.js 或 build/setup.js)中设置一个代理,让所有对 /api 的请求都被转发到实际的本地服务。这样可以避免 CORS 问题。 ```javascript // vue.config.js module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8080', // 替换为你本地的实际服务端地址 ws: true, changeOrigin: true, pathRewrite: { '^/api': '' } } } }, } ``` 4. **使用JSONP(仅限于GET请求)**:对于只支持 GET 的本地 API,你可以尝试使用 JSONP 来绕过同源策略,但这通常不是最佳实践,因为 JSONP 只适用于 GET 请求,并且安全性较差。 注意:以上建议适用于前后端分离的场景。如果是单页应用,且 API 实际上就在同一页的同源下,上述问题则无需处理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值