前端配置了代理，还是跨域怎么回事？

已于 2024-02-25 16:47:35 修改
阅读量649 收藏 1
点赞数
分类专栏： Vue相关 文章标签： 前端
于 2023-09-20 14:48:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58575070/article/details/133079658
版权
文章讲述了作者在帮助同事解决bug时，遇到因axios的baseUrl配置与代理冲突导致的跨域问题。问题在于axios不会优先使用代理，而是尝试拼接baseUrl和请求路径，解决方法是确保在axios中不设置baseUrl或正确配置以利用代理功能。
摘要由CSDN通过智能技术生成

前言:

        今天被同事邀请帮忙看bug的时候，遇到了这个问题；代理配了，而且再三确认配置的没问题，项目也重启了，浏览器直接发访问是可以获取到的，但控制台就是报跨域。没办法，再次看代码，最后终于发现了问题。

问题是这位同事在对axios进行二次封装的时候，配置了baseUrl，那么问题来了，如果你配置了代理，又在axios中配置了baseUrl，那么它会将baseUrl和请求路径进行拼接然后去做访问，并不会去走代理；因此，才会一直报跨域的错。

代码:

代理：

axios封装:

学无止境鸭
关注
专栏目录
Nuxt - 详细配置 proxy 跨域代理（设置代理解决前端跨域问题）
王佳斌
07-08 6274
很多朋友出现了跨域、无法请求数据等问题，其实就是 跨域没配或配的不对 问题。在项目根目录，执行如下安装命令（cnpm / yarn）： 第二步 打开项目根目录下 配置文件，在 配置项位置，加入以下代码： 打开项目根目录下 配置文件，在 配置项位置，修改或加入以下代码： 还是在项目根目录 配置文件里，加入（或修改） 配置项，一键复制以下代码： 您也可以用 Nuxt.js 的 http-proxy 中间件解决方案 ，详见 https://github.com/nuxt-community/prox
前端配置跨域（代理服务器）
qq_60976312的博客
12-15 2445
前端配置跨域（代理服务器）
前端跨域问题解决，本地代理到域名
m0_46107987的博客
02-20 335
最后发现是这里少写了/api，遇见以api开头的接口，则把这些接口转发到target所指向的服务器地址。但是已经设置了代理，仍然无效。完整的接口请求地址是。
神坑——后端允许了跨域但是前端（vue3+vite+axios）仍然提示跨域
热门推荐
lsjweiyi的博客
05-08 1万+
这个问题坑了我整整一个晚上。·这明明是个非常常见的问题，我自己也遇到好多次了，以前都是后端允许跨域就可以了。但是这次就是不行！ 首先晚上最多的方案是用代理，例如这篇：https://blog.csdn.net/admin_web/article/details/121924527 我一晚上也主要在按照这些方法去尝试，但是我努力一个晚上，都不行，一直怀疑是自己的姿势不对！最后在快要放弃前（12点多，不清醒了），瞎猫碰上死耗子，居然解决了。 不是配置问题！ PS:我的后端用go写的，这里也贴一下我的允许跨域：
axios中的baseURL与跨域问题
最新发布
joan_yb的博客
08-10 1170
axios中的baseURL与跨域问题
前端vue的配置跨域代理服务器
m0_66702519的博客
11-29 1176
vue2的前端配置proxy代理跨域问题解决方案
已配置vue.config.js中的proxy代理，前端本地环境仍然请求后端出现跨域报错
qubes的专栏
01-04 3875
已配置vue.config.js中的proxy代理，前端本地环境仍然请求后端出现跨域报错。
配置代理——解决跨域问题（详解）
M_emory_的博客
07-26 4907
配置代理——解决跨域问题（详解） 二、跨域问题的产生 当出现以下报错，看到 CORS 和 'Access-Control-Allow-Origin' 这两个关键信息的时候，就说明出现跨域问题了
vue.config.js配置完代理还是提示跨域？
Hoskein的博客
03-11 1395
哥，配置了代理之后，请求的url是向代理服务器发请求。请求的url的host和端口改一下，配置的时候如果设置了pathRewrite，也改改url。
【开发篇】明明设置允许跨域，为什么还会出现跨域请求的问题
求索
06-23 1218
1、为什么会出现跨域问题？ 2、allowCredentials参数有什么作用？ 3、微服务项目如何正确配置跨域支持？ 4、Spring Boot如何配置跨域支持？ 5、Spring Cloud Gateway如何配置跨域支持？
2024年Web前端最新【vue】 配置代理、解决跨域问题_vue 代理，看这一篇就够了
2401_84435768的博客
05-05 717
其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）《前端开发四大模块核心知识笔记》最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。
vue（2.x，3.0）配置跨域代理
10-15
在前端开发过程中，经常会遇到跨域资源共享（CORS）的问题，这是因为浏览器出于安全考虑，限制了不同源...通过理解同源策略和掌握配置代理的方法，可以更加灵活地解决开发中的跨域问题，提高开发效率和项目的完成质量。
web前端 代理服务器解决跨域
m0_72584945的博客
11-12 841
web前端 代理服务器解决跨域
vue配置代理解决跨域问题
sudo0m的博客
07-04 695
你可以根据你的具体需求和后端配置进行相应的修改。确保在项目根目录下的。文件中添加这个配置，然后重新启动开发服务器，代理配置就会生效。选项来设置代理以解决跨域问题。在这个示例中，我们设置了一个代理，将以。通过这个配置，当你在开发环境中发送。的请求时，它会被代理到。
使用 Next.js 配置接口跨域
agions的博客
03-13 1226
通过配置 Next.js 的接口跨域，你可以轻松地与外部 API 进行通信，构建更强大的 Web 应用程序。请注意，具体的跨域配置可能因你使用的 API 或服务而异。因此，你可能需要根据你的具体情况进行相应的调整。通常，这涉及在服务器端设置 CORS（跨域资源共享）策略，以允许来自指定来源的跨域请求。在现代 Web 开发中，跨域请求是一个常见的问题。的属性，你可以将其替换为实际的 API 密钥或任何其他跨域相关的配置信息。接下来，在你的 Next.js 组件中，你可以使用。获取跨域配置的值，并将其存储在。
spring cloud gateway跨域问题一直解决不了
绅士jiejie的博客
04-06 772
跨域问题经常解决，本来以为这次也很简单，就是搞个跨域配置类，统一在网关处理就好了，像什么双重跨域这些问题早都处理过一次了，但后面发现跨域问题还是存在，一模一样的配置，为什么换个项目就不行了？ 带着以上的问题，我开始做对比，发现这个网关项目多引入了spring security这个安全框架依赖，同时也初步配置了一些安全框架所需的配置类，项目初起步，没必要分析这么深，所以我直接手起刀落，把spring security相关的东西都先删了，然后重启网关，发现跨域问题已经解决了。具体问题我没去分析，感觉太麻烦了，先
前后端跨域问题（解决方向和思路）
qq_20236937的博客
04-19 2678
浏览器的同源策略是跨域问题的根本所在。同源策略是一个非常重要的安全策略，它用于限制两个源之间在浏览器上进行资源交互。如果缺少了同源策略，网站或服务器很容易受到 XSS、CSFR 等攻击。那么同源是什么意思？同源表示两个 URL 的origin(源、请求头)是相同的，origin 由protocol(协议)、**host(域名)**和port(端口)组成。简单一点就是指 协议，域名，端口都要相同，其中有一个不同都会产生跨域。
vue后台管理系统，proxy代理，api字段相同，但请求服务域名不同产生跨域的问题解决
FTEzreal的博客
02-20 1139
vue后台管理系统，proxy代理，api字段相同，但请求服务域名不同产生跨域的问题解决
vue proxy代理失效无法跨域问题
前端成长之路
11-24 4394
今天在研究vue代理跨域的时候，发现了一个很奇怪的问题：vue配置代理访问本地的node接口时，出现跨域问题，但是proxy代理配置的又没有问题。
前端配置代理跨域是怎么一个流程啊
06-07
前端配置代理跨域的流程一般如下： 1.在项目中安装一个代理服务器，如 http-proxy-middleware 或 http-proxy 等。 2.在项目中创建一个代理配置文件，如 proxy.config.js 或 proxyTable 等。 3.在代理配置文件中配置需要代理的接口地址和目标地址。比如： ``` module.exports = { '/api': { target: 'http://localhost:3000', changeOrigin: true, pathRewrite: { '^/api': '/api' } } } ``` 上述代码表示，将以 `/api` 开头的请求代理到 `http://localhost:3000`，并将请求路径中的 `/api` 替换成 `/api`。 4.在项目中引入代理配置文件，如在 vue-cli 项目中可以在 `vue.config.js` 中配置： ``` module.exports = { devServer: { proxy: require('./proxy.config.js') } } ``` 5.重启项目，访问接口时，所有以 `/api` 开头的请求都会被代理到目标地址，从而实现跨域访问接口。 需要注意的是，代理服务器需要安装和配置正确，并且需要在开发模式下使用，生产环境中不应该使用代理服务器来解决跨域问题。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值