前端配置了跨域代理，却还是报错

最新推荐文章于 2025-06-04 14:27:10 发布

原创最新推荐文章于 2025-06-04 14:27:10 发布 · 4.7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

vue 专栏收录该内容

20 篇文章

订阅专栏

博客讲述了作者在前端项目中遇到跨域代理配置问题，尝试多种方法未果，最终通过阅读某博主的文章找到解决方案。问题在于webpack.config.js未正确暴露配置，而是在vue.config.js中配置了http-proxy-middleware。安装并使用该中间件后，成功解决了跨域问题。

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

前端配置了跨域代理，反反复复检查了配置文件，也确保配置文件修改过后是保存重启过项目的却还是报错，如下：

Proxy error: Could not proxy request /api/product/getBaseCategoryList from localhost:8080 to
 http://39.38.123.211.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ETI
MEDOUT).

最后查遍了百度，在这个博主这里得到了解决：

前端配置跨域代理_杏子-优快云博客_前端配置代理

发现我是属于第二种情况，也就是webpack.config.js 文件暴露没有暴露在外，我是在根目录下创建了vue.config.js文件的那种情况，所以需要借助中间件http-proxy-middleware 配置跨域代理。

安装http-proxy-middleware

npm install http-proxy-middleware --save-dev

此时重启项目，问题得以解决！

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

麦多馅饼

关注关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

uniapp/axios解决跨域

m0_56787367的博客

08-04

2353

uniapp跨域以及axios解决跨域

前端中跨域问题的CORS配置与解决方案

最新发布

shejizuopin的博客

06-11

701

本文系统总结了前端开发中的跨域问题及CORS解决方案。首先介绍了CORS基础概念，包括同源策略和两种请求类型（简单请求与复杂请求）。文章详细阐述了三种后端CORS配置方案和Nginx配置方法，并提供了常见问题修复表。最后对比分析了四种前端跨域方案的优缺点，建议根据实际应用场景选择合适方案。通过正确配置CORS和选择适当跨域技术，可以有效解决前端跨域问题，提升应用稳定性和用户体验。

参与评论您还未登录，请先登录后发表或查看评论

html 跨域_配置跨域成功又失败了

weixin_39750195的博客

11-24

384

前端调用接口说是有跨域问题，让我解决一下。一顿操作猛如虎，测试验证通过，增加配置如下：@ConfigurationpublicclassWebAppConfigurerimplementsWebMvcConfigurer{@OverridepublicvoidaddCorsMappings(CorsRegistryregistry){ registry.addMa...

前端错误：Proxy error: Could not proxy request /api-uaa/oauth/token from localhost:8080 to

xiaoyezhiei的博客

06-04

568

这个错误的根本原因是前端代理无法解析 funeral_vue 这个主机名。你需要检查代理配置的目标地址是否正确，并确保该地址可以被解析和访问。

配置了跨域，前后端参数一致的情况下，仍旧报跨域错误。

xujianfengCV的博客

10-19

1477

跨域配置要从：①：允许的域，不要写*，否则cookie就无法使用；②：是否发送Cookie信息；③：允许的请求方式；④：添加需要拦截的映射路径；这些方面进行逐一考虑。我遇到的问题是前端前端请求是允许携带Cookie，但是后端并没有配置允许携带，所以造成了跨域错误。 ...

springboot配置好跨域后，下载文件仍然报跨域错误

wq123123423432的博客

05-12

481

将response.reset()注释掉；因为reset()会将应答头resq中的跨域标识都清除掉。

后端通过CorsRegistry对象配置了全局跨域，但是前端仍然报CORS跨域错误

热爱编程、热爱生活、热爱探索

07-29

4435

所以错误的跟本原因在于OPTIONS，由于我配置了登录拦截器，对于放行请求，不会有什么问题，但是对于没有放行的请求，会直接拦截OPTIONS请求，OPTIONS请求是一个探测请求，内部并不会携带token，所以就直接导致OTIONS请求被拦截，这样就会让浏览器觉得请求不可达，直接在前端报。在前后端分离的项目中，很容易出现跨域错误，因为前端和后端的端口号、主机名一般都不相同，此时前端能够发送请求给后端，但是由于同源策略的存在，会直接被浏览器给拦截。也可以配置跨域，我一般都是直接在后端配置跨域的，可以使用**

前端或后端解决跨域问题,以及配置axios拦截器

Java从0基础到全干

08-09

569

本文从前端以及后端两个角度解决了前后端分离项目中跨域的问题,还配置了axios拦截器以及如何使用axios拦截器发起请求的示例

gRPC-Web报错「14 UNAVAILABLE: Failed to connect」：CORS与代理配置的跨域方案

shejizuopin的博客

05-14

772

核心调优原则CORS优先：在代理层实现CORS配置，避免后端代码侵入。代理兜底：对关键路径实现Envoy代理，但需控制资源占用。监控闭环：通过日志、指标、告警形成完整的监控体系。

web前端代理服务器解决跨域

m0_72584945的博客

11-12

956

web前端代理服务器解决跨域

axios代理跨域之仍然报错404(包括vue封装axios步骤)

weixin_52862941的博客

08-11

2151

深入理解代理跨域：为什么会有代理跨域呢，因为当我们是在本地运行项目，但想获取后端服务器的数据，那么前端项目和后端服务器之间就是跨域了，那么就出现了代理跨域这个办法，我们通过“代理服务器”来发送请求，那么baseURL就不写服务器的地址了，我们写/api,然后设置“代理服务器”，在proxy中配置/api，意思是当请求遇到/api的时候就重定向到。baseURL:向后台发请求的时候我们可以提前设置一下后台基准的请求地址，这样后面再发请求的时候，只需要写后面的路径就可以了。

SpringSecurity跨域问题，配置了相关配置还是报错

LJWWD的博客

08-20

1096

跨域问题基础配置 1、配置跨域正常的跨域配置 @Component public class CORSInterceptor implements HandlerInterceptor { @Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { response.setHead

后端配置了跨域，前端还是提示跨域问题解决

explorer_321的博客

04-05

517

后端正确进行了跨域配置，但是前端浏览器请求的时候还是出现了跨域问题，详细解决方案（实战测试可行）

在spring boot+vue项目中@CrossOrigin 配置了允许跨域但是依然报错跨域，解决跨域请求的一次残酷经历

m0_64951177的博客

10-28

1439

前端报错，我一看哎跨域问题，于是后端配置允许跨域各种配置都不好使，问题排查OPTIONS请求不能带自定义token所有后端拦下来请求以后拿不到token，后端拿不到token就直接重定向到错误处理接口然后返回从错误处理接口中返回具体的错误情况，首先，说一下我们的项目情况，我们项目中后端有一个过滤器，如果必须要登录的接口路径会被拦下来检查，前端要传一个token，然后后端根据这个token来判断redis中这个用户是否已经登录。解决办法，判断token之前如果OPTIONS请求直接放行。

跨域信息配置正确，依然跨域报错

Dark_Portal的博客

01-31

300

反复检查尝试网上搜到的办法，全都不行。意外发现windows系统发布的应用程序池被停止了，其实是个很小的问题，遇到跨域问题未必是代码有问题，可以提供一个其他的思路方向解决。一看跨域问题，查看代码跨域配置应该都没有问题。分享一个刚刚遇到的问题，先上报错信息。应用程序池启动后，跨域问题解决。

uniapp配置好跨域之后，还是有跨域问题解决方法

jakelihua

05-31

2060

本文讲解，uniapp配置好跨域之后，还是有跨域问题解决方法（Access to XMLHttpRequest at ‘http://localhost:8080/login‘ from origin ‘http://localhost:80）如果配置了跨域问题，还是报错，这个时候就是uniapp本身的问题了，只需要先把代码不用。的形式写一遍，直接localhost，然后在用。如果没有配置跨域问题，看这篇文章，的方式写一遍，就可以解决了。

配置了跨域仍旧报错403

m0_73493670的博客

11-12

2249

当你发现自己虽然正确的配置了跨域。比如说加了@CrossOrigin注解，但是仍旧前端跨域爆红的时候，也许并不是跨域本身的问题，而是传参类型错误。这可能是一种误报，但是比如说前端给的数据是Params过来的一个数组，但是它实际上是以一个Map<格式过来的参数，所以你接数据的时候需要用键值对接。否则就会出现403错误，而实际上你的参数永远都没有正确的传入后端接口中，更别提回馈了，这种错误将会在预检时直接爆出，没有状态码，但是你的浏览器Console上面写的是403错误，跨域问题。

后端配置了跨域配置前端访问还是提示跨域

陌子曦的专栏

10-21

5077

跨域解决

vue3.0 proxy设置代理不成功

weixin_48813932的博客

03-20

9982

最后还是出现在axios的默认基本路径的配置和代理发生了冲突，代理本身是将请求基本路径代理到目标基本路径。要么设置为项目启动路径http:localhost:8080要么设置为空。axios 基本路径却设置为http:localhost:3000,项目基本路径是http:localhost:8080。代理目标路径为：http:localhost:3000。首先在项目中创建vue.config.js。注意在ts环境下仍为js结尾。此时项目启动仍然报错跨域。axios的基本路径。

前端报跨域的报错信息

02-27

### 前端跨域错误解决方案当遇到前端跨域问题时，有多种方法可以有效解决问题。最理想的情况是将前后端服务部署在同一台服务器上，确保协议、域名以及端口号完全一致，这样从根本上避免了跨域的发生[^1]。然而，在实际开发环境中，这可能并不总是可行的选择。此时可考虑采用代理服务器的方式来绕过浏览器同源策略限制。通过配置本地开发环境中的Web服务器作为中间层转发请求给目标API服务器，再由该服务器返回响应数据给客户端应用[^3]。对于基于Node.js构建的应用程序来说，可以通过`http-proxy-middleware`库轻松设置反向代理： ```javascript const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function(app) { app.use( '/api', createProxyMiddleware({ target: 'https://example.com', // 目标接口地址 changeOrigin: true, pathRewrite: { '^/api': '' // 将/api替换为空字符串 } }) ); }; ``` 另一种常见的处理方式就是启用CORS（Cross-Origin Resource Sharing），即跨域资源共享机制。这是一种安全标准，允许特定的外部资源被加载并访问。后端需正确设置HTTP头信息以告知浏览器哪些来源是可以信任并与之交互的站点[^4]。例如，在Express框架下添加如下代码片段即可开启简单形式下的全局CORS支持： ```javascript var express = require('express') var cors = require('cors') var app = express() app.use(cors()) app.get('/products/:id', function (req, res, next) { res.json({msg: 'This is CORS-enabled for all origins!'}) }) ``` 值得注意的是，虽然上述两种办法能够很好地应对大多数场景下的跨域挑战，但在某些特殊情况下还需要结合业务逻辑做出更灵活调整。比如JSONP技术适用于仅限GET请求的数据获取操作；WebSocket则提供了全双工通信渠道而不受制于传统意义上的同源政策约束等。