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

最新推荐文章于 2025-03-10 21:21:24 发布
原创 最新推荐文章于 2025-03-10 21:21:24 发布
· 2.3k 阅读 · 1 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #开发语言 #vue.js #webpack #vscode

在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'

Axios教程
m0_44982764的博客
11-26 1363
Axios 是一个基于 promise 的 HTTP 库，通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。 文档：axios中文文档|axios中文网 | axios 1.传入配置发起请求 　　axios({ 　　　　url: '接口地址', 　　　　method: 'get', // 或者post请求类型 　　　　responseType: 'json', //默认格式json 　　　　data: { 　　　　　　'username' : 'hx', 　　　　
Vue: axios 请求封装及设置默认域名前缀 (for Vue 2.0)
热门推荐
少东的博客
03-27 1万+
1. 实现效果 以get方法向http://192.168.32.12:8080/users 发起请求、获取数据并进行处理 this.apiGet('/users', {}) .then((res) => { console.log(res) }, (err) => { console.log(err) }) 2. 实现步骤一之配置域名前缀 2.1...
vue中axios的post请求url自动带上本地ip解决方法
你好！刘斩仙
01-05 6703
描述 解决方法 1.URL地址错误，https://或者http://写错了。（占比90%） 2.URL地址正确，但是 VUE_APP_BASE_API = ‘http://10.196.33.41:8082/crm-admin’ 前后有空格，去掉空格就好了。 ENV = 'development' # base api (此处不能有空格)VUE_APP_BASE_API = 'http://10.196.33.41:8082/crm-admin'(此处不能有空格) ...
vue中axios请求url自动带上本地ip解决方法
weixin_43249785的博客
06-18 6611
封装好axios后，出现这种情况
处理axios本地请求地址自动加上了http://localhost:8080/
Renners的博客
07-29 1万+
问题请求地址变成了localhost8080+配置的本地地址。处理方法配置完善的ip地址，加上http或https。原因baseURL配置的ip不完整。再次调用后发现已经可以了。
vue路由为什么请求的接口会携带路由的一级地址
weixin_51491855的博客
10-18 436
接口会携带路由的一级地址
Vue使用axios出现options请求方法
10-16
这是因为POST请求在CORS策略下被认为是不安全的，所以浏览器会先发送OPTIONS请求来确保服务器允许这种类型的请求。以下是相关知识点的详细说明： 1. **CORS**：CORS是一种W3C标准，它允许浏览器和服务器进行跨域...
Vue axios 跨域请求无法带上cookie的解决
10-14
然而，当进行跨域请求时，有时会遇到一个问题，即浏览器不会自动携带cookie。这种情况在使用Vue axios时尤为常见，尤其是在开发和部署环境之间切换时，可能会发现本地开发时cookie能够正常传递，但一旦将应用部署到...
完美解决axios跨域请求出错的问题
08-28
跨域请求是指在浏览器中，由于同源策略的限制，无法直接向不同域名或端口下的服务器发送请求，从而导致ajax请求失败。例如，在localhost:9000下的前端应用程序想要向localhost:8080下的后端服务器发送请求，这时就会...
在 Axios 中设置代理
最新发布
亮数据 Bright Data 的博客
03-10 2219
使用 Axios 为 HTTP、HTTPS 和 SOCKS 请求配置并使用代理，包括轮换代理和全局配置等进阶场景。
前端项目实战211-axios请求地址默认加了本地地址
qq_41632427的博客
11-28 571
前端
Vue-axios请求模块及路由
Yannick_H的博客
08-22 1601
目录一、vue-axios请求模块1、axios模块：是一个基于promise的http客户端请求工具。2、axios使用方法(1)安装axios(2)无参的get请求：(3)带参的get请求：(4)post请求：(5)put请求(6)delete请求(7)axios的数据封装格式：3、vue-axios模块：是针对Vue对axios进行了一层简单的包装(1)安装：(2)在main.js文件中进行全局的配置二、Vue的路由1、路由：从源页面到目的页面的决策过程2、前端路由：在前端页面中维护的路由规则3、Vu
Vue axios请求自带域名，接口及项目名
hongfei130的博客
06-10 2011
标题 @TOC 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示
axios发起post请求，url后面的参数自动拼接到Request URL上
anhui1102的博客
03-05 1万+
最近遇到一个神奇的bug，当通过路由query传参跳转到新的页面时，新页面请求接口的Request URL后面自动拼接上了query传参 具体如下： 跳转路由是这样的 let path = "********";this.$router.push({path:path,query:{keyWord:"零食"}}) 跳转到新的页面后新页面所有请求接口的地址 ht...
axios post 跨域请求
晚灯看街的博客
05-11 6943
1、vue-cli创建的工程 config/index.js 修改dev下的proxyTable： module.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api': { ...
使用axios时路径自动出现一个根路径，形如http://localhost:1024/localhost:3000/api
weixin_68697844的博客
08-18 1193
/\//i’ (1.开头必须是‘//’ 2.字母开头，后跟任意位字母、数字、加减号、点。之后是’：//‘)判断出我的url/localhost:3000/api是一个相对url,但是因为没有传入baseURL，所以buildFullPath并不会做任何事。这里的fullPath由基础路径和配置路径进行拼接得到（就是axios.default.baseURL和发送axios请求时的配置的url。这里我详细研究了原因。测试的使用原生js发送xhr请求时，仍然会出现这种情况，所以这并不是axios的原因。
vue中axios封装及自动设置域名
qq_38468358的博客
12-01 5770
现在越来越多的 Vue.js 项目里使用 axios，而不在使用 vue-resource，在使用 axios 都会进行一次封装，接口集中管理，还有各个环境域名自动匹配设置 1、安装axios： npm install --save axios 2、在 main.js 引用 axios       因为我进行了一次封装，所以可能和大家引用的方式不一样，我是在src文件里创建了一个 fetc...
前端技术:vue(Vue项目中-axios设置默认请求地址和请求头)
大洋哥的博客
08-31 4595
一、下载axios模块 npm install axios --save 二、在main.js中引用axios import axios from 'axios' 三、设置默认请求地址 axios.defaults.baseURL = 'http://localhost:8081/'; // 填写后台请求统一的地址 四、设置默认请求头 axios.defaults.headers['Cont...
跨域 问题 原理以及解决方法
Monster的博客
12-26 1771
深入讲解一下CORS：CORS其实就是跨域资源共享，它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。:出现的较晚，它是W3C标准，属于跨域Ajax请求的根本解决方案。
vue用axios请求本地api接口出现本地的服务器拼接api地址
11-12
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、付费专栏及课程。

余额充值