Vue 配置proxy代理不生效

已于 2023-03-03 12:28:29 修改
阅读量6.9k 收藏 15
点赞数 4
分类专栏： vue 文章标签： vue 前端
于 2023-03-03 12:22:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_69926399/article/details/129317407
版权
文章讲述了作者在配置项目代理时遇到的问题，由于在请求封装中错误地添加了绝对路径，导致请求未通过代理服务器直接发送，从而引发跨域问题。解决方案是正确设置.env.development文件中的服务器地址和路径，以及在代理配置中使用环境变量，避免直接添加绝对路径。

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

之前给一个项目配置代理，配的模模糊糊完全没懂，今天就又试了一下结果还是一直跨域。

服务器

请求

 代理

在网上查了一遍才发现不是代理配置错了，而是请求就没有走代理服务器。

原因是在请求二次封装的地方，给baseURL直接添加了绝对路径，导致请求直接从本地就发出去了。

第一步：在.env.development文件夹设置服务器地址和路径

封装的请求也不需要配置路径了

 第二步：配置代理的地方也直接用env配置文件里的路径就可以了。

 

 花了两三个小时才解决，还需要继续努力！

vue+axios 配置反向代理解决跨域问题
Lee的博客
12-01 6107
首先配置config下的index.js dev: { // Paths assetsSubDirectory: 'static', autoOpenBrowser: false, assetsPublicPath: '/', proxyTable: { // 在这里配置如下代码 '/api': { target:...
pathrewrite不生效_Vue使用Proxy代理后仍无法生效的解决
weixin_28314575的博客
12-23 8027
vue.js 配置了前端代理却未能生效记录一下最近踩得小坑：配置完代理后请一定重新执行(重要，非常重要！)npm run dev若重新执行命令后，代理仍为生效，请按下方步骤进行检查：检查index.js文件中的代理是否配置正确，示例如下：proxyTable: {'/api': { //代理标识target: 'http://xxx.xxx.xxx',//指向的实际地址changeOrigin: ...
Vue使用Proxy代理后仍无法生效的解决
01-21
vue.js 配置了前端代理却未能生效 记录一下最近踩得小坑： 配置完代理后请一定重新执行（重要，非常重要！） npm run dev 若重新执行命令后，代理仍为生效，请按下方步骤进行检查： 检查index.js文件中的代理是否配置正确，示例如下： proxyTable: { '/api': { //代理标识 target: 'http://xxx.xxx.xxx',//指向的实际地址 changeOrigin: true, // 允许跨域 pathRewrite: { // 标识替换 // 原请求地址为 /api/getData 将'/api'替换''时
vite死活代理不成功的问题
最新发布
荒唌Blog
04-01 174
代理地址，必须是 127.0.0.1 不能是 localhost；本地请求，必须是 localhost不能是127.0.0.1；
vue项目，proxy代理失效，解决方案
热门推荐
qq_57260058的博客
02-22 3万+
proxy，代理失效
vue3.0 proxy设置代理不成功
weixin_48813932的博客
03-20 9845
最后还是出现在axios的默认基本路径的配置和代理发生了冲突，代理本身是将请求基本路径代理到目标基本路径。要么设置为项目启动路径http:localhost:8080要么设置为空。axios 基本路径却设置为http:localhost:3000,项目基本路径是http:localhost:8080。代理目标路径为：http:localhost:3000。首先在项目中创建vue.config.js。注意在ts环境下仍为js结尾。此时项目启动仍然报错跨域。axios的基本路径。
proxy代理不生效、vue config.js不生效解决方法
weixin_47379721的博客
01-06 1万+
vue config.js 配置跨域不生效已解决、proxy代理不生效已解决、axios配置跨域不生效已解决、springboot跨域设置已解决
关于Vue-Cli proxy 不生效的问题
风吹稻花香的博客
08-20 7934
前端开发中经常会遇到调后端接口跨域的问题，解决方法有很多，这里不做介绍了，（有兴趣的可以去这里看看：https://juejin.cn/post/6844904126246027278#heading-44） 今天主要说下Vue-Cli 中的代理，因为看到好多人按照官方文档配置，结果却不生效，为什么会这样呢，无外乎配置的不正确。 先看下官方的文档： devServer.proxy Type:string | Object 如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需.
vue cli3 配置proxy代理无效的解决
10-16
总的来说，当遇到Vue CLI 3的`proxy`代理无效时，首先要检查配置是否正确，然后排查端口、请求路径和跨域设置。如果仍然无法解决问题，可能需要查看浏览器的开发者工具网络面板，检查请求是否被正确发送以及返回的...
vue配置proxy代理不生效
07-27
你可以尝试以下步骤来解决Vue配置代理不生效的问题： 1. 确保你已经在`vue.config.js`文件中正确配置了代理。在项目根目录下创建一个名为`vue.config.js`的文件（如果不存在），并添加以下代码： ```javascript ...
Vue代理模式和Nginx反向代理(Vue代理部署不生效)
CVPR收割机的博客
02-06 2628
那么这时候数据请求将请求的是http://localhost/api/admin/employee/login地址，但是我们需要请求的接口。前端发送：http://localhost:7070/api/admin/employee/login。经过代理转换为：http://localhost:8080/admin/employee/login。前端发送：http://localhost:7070/api/admin/shop/status。：打包时这个代理并不会跟着打包。打包结束后生成dist文件夹。
Vue使用Proxy代理后仍无法生效
Piepie
03-02 3万+
vue.js 配置了前端代理却未能生效 记录一下最近踩得小坑: 配置完代理后请一定重新执行（重要，非常重要！） npm run dev 若重新执行命令后，代理仍为生效，请按下方步骤进行检查： 检查index.js文件中的代理是否配置正确，示例如下： proxyTable: { '/api': { //代理标识 target: 'http://xxx.xxx...
vue3 + vite 代理配置无效的原因
GFreasy的博客
01-09 8921
vue3 + vite 代理配置无效的原因。
vue proxy代理失效无法跨域问题
前端成长之路
11-24 4691
今天在研究vue代理跨域的时候，发现了一个很奇怪的问题：vue配置代理访问本地的node接口时，出现跨域问题，但是proxy代理配置的又没有问题。
记录vue.config.js中配置代理(devServer)不生效的坑（跨域问题处理）
流沙QuickSand
07-08 1万+
前后端分离后，会遇到跨域问题。导致后端响应的数据被浏览器“拦截”，前端无法接收。往往就会导致类似下面的问题产生： 大意就是请求地址不同源，导致了跨域问题。解决方法：使用vue-cli脚手架，在vue.config.js文件中配置代理服务器，从而解决跨域问题。...
Vue的proxy不生效总是重定向到localhost，请求头没有cookie怎么解决？
clancy_pinkie的博客
03-29 1289
pathRewrite不生效就干掉它，请求头没有cookie是因为没使用代理
vue.config.js中配置代理(devServer)不生效的坑（跨域问题处理
LlanyW的专栏
01-11 5006
尚硅谷的后台管理系统，用户与商品信息用的接口端口号不一样。需要配置多个proxy代理。
vue3 vite axios里的url加上域名后本地proxy配置无效
LonlyTree的水源
10-11 1122
在 Vue 项目中使用 Vite 作为构建工具时，如果在 axios 的请求 URL 中直接指定了完整的域名（例如 http://example.com/api），那么 Vite 的代理配置 (proxy) 将不会生效。这是因为 Vite 的代理配置仅对开发环境中的相对路径有效，当 URL 包含完整域名时，请求将直接发送到指定的服务器，而不会被代理。如果可能的话，将请求 URL 修改为相对路径（例如 /api），然后通过 Vite 的代理配置来重定向这些请求到目标服务器。选择最适合你项目需求的方法来实施。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值