vue项目vue.config.js中devServer.proxy代理配置容易让人忽略的问题-踩坑

最新推荐文章于 2024-03-21 13:30:51 发布
最新推荐文章于 2024-03-21 13:30:51 发布
阅读量2.7k 收藏 4
点赞数 6
分类专栏： 前端学习 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pikachu_magical/article/details/121192737
版权

这种在项目测试注意到一个很奇怪的问题， vue-image-crop-upload 该组件的图片上传请求在开发环境没有一点问题，一到生产环境就开始报错

仔细对比发现问题出在请求路径上
开发环境中 请求都是 http://localhost:8013/开头
而生产环境中 正常的请求都是以后端地址开头,而出问题的请求是以前端地址打头
在这里插入图片描述
该组件请求没有经过封装的axios拦截器，开发环境与拦截器请求地址一样，但到生产，其他封装的情景就以后端服务地址开头了，而组件仍是以前端地址开头
在这里插入图片描述
当时急于解决问题，没有深究原因
只是简单的解决了问题
在这里插入图片描述
data中添加属性，
然后加入url中
在这里插入图片描述
后面开始研究问题所在
通过请求路径不同和请求结果 ，很容易发现，在生产环境中前端地址开头的请求明细是没有被代理或代理出了问题
以前端地址开头请求，请求失败，很明显就是代理有问题

刚开始以为是在生产环境和开发环境中这个devServer.proxy代理配置需要有些差异
搜了一些博客也没有相关的说明或配置

很干脆的把代理配置先注释，直接请求后端地址的请求也没有问题，加上之前了解到了，跨域问题前端代理和后端配置有一个即可

在这里插入图片描述
对比发现，这个控制变量法好像也没啥说服力[手动狗头]
在后端有跨域配置时，代理是完全没必要的，直接以后端地址请求就行了，所以上面的axios拦截直接以后端地址为baseURL就行，着实没必要判断生产环境还是开发环境

后面又去看了一下文档
在这里插入图片描述
这个代理是对于开发环境的
其实也很好理解，这个是代理是vue cli带的，现在换成生产环境，自然没vue cli什么事情了

总结

对于跨域问题，还是后端配置比较方便，devServer.proxy是不在生产环境中生效的，所以当一些组件存在请求封装的时候，一定要使用完整请求路径，即请求后端地址，当然，在前端做了一些别的跨域代理配置另说，之前学习跨域问题的时候，很多博客并未提交以devServer.proxy代理跨域仅在开发环境有效

推荐一个vscode插件

Live Server
在这里插入图片描述
安装后右下角会有个go live ,就可以以本地服务运行dist打包文件了，还是比较方便的

正在学习中，如果存在问题，欢迎指正批评

Pikachu_magical
关注
  • 6
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
如何搭建一个完整的Vue3.0 + ts 的项目
sinat_28371057的博客
12-13 4806
如何搭建一个完整的Vue3.0 + ts 的项目 相信9月18日尤大大的关于Vue3.0的发表演讲大家一定有所关注,现在Vue3.0 也已经进入RC阶段（最终产品的候选版本，如果没有问题则可发布成为正式版本）。所以Vue3.0的学习是我们必然的趋势，今天，主要分享一下Vue3.0的详细搭建过程，希望可以为初入Vue3的小伙伴有所帮助。 我们现在开始进入今天的主题啦~~ 一、安装 1. 安装nodejs 此处提供nodejs下载地址：https://nodejs.org/zh-cn/dow..
[学习笔记]开发环境和生产环境下webpack配置问题
Xeeeeiii的博客
07-03 278
当我们在不同环境下使用webpack对代码进行打包时, webpack内的配置一定是不一样的。 比如: 开发环境和生产环境下的代码压缩问题 开发环境和生产环境下sourceMap 和 Tree Shaking的配置不一 热模块替换在生产环境下不适用 devServer不需要在生产环境下使用 等等… 这些问题会导致开发过程中需要经常改写webpack配置。所以这个时候就需要对webpack的配置文件进行分割与合并, 我们可以创建两个webpack配置文件供不同模式下使用, 如 webpack.dev.
vue-cli项目代理proxyTable配置exclude的方法
01-21
问题描述 如果是前后端分离的项目，本地开发环境需要访问mock，或者在调试时直接访问线上的接口，这时候就会有接口跨域的问题（mock不存在跨域问题，但是用这个方法配置起来方便，姑且算是一个问题）。以vue-cli生成的项目为例，需要配置 config/index.js 中的 proxyTable 属性，大概如下： proxyTable: { '/pc/my/list/': { target: 'http://10.132.20.14:8083/mockjsdata/66', pathRewrite: { '^/pc/my/list/': '/pc/my/list/' } }
vue – vue.config.js中devServer配置方式
12-13
前言 这里写你调用接口的基础路径，来解决跨域，如果设置了代理，那你本地开发环境的axios的baseUrl要写为”，即空字符串 只有一个接口ip端口时 devServer: { open: false, // 跨域 proxy: { '/nuojinadm/': { target: 'http://192.168.0.11/', changeOrigin: true } } } 2、设置axios中的baseUrl 与proxy端口一致 baseUrl: { dev: '/nuojinadm/', pro: '/nuojinadm/'
vue.config.js中配置devServer.proxy代理
最新发布
来一颗砂糖橘
03-21 1万+
vue跨域问题 vue.config.js中配置devServer.proxy代理。
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
01-19
vue-cli 3.x 的beta版本，基于iview做的公司的角色权限管理平台。 3.x 版本对整个项目的构建都有很大的改动，没有原先的config文件夹，没有dev.env.js和prod.dev.js，看了教程，要自己在根目录建vue.config去配置，如果你用axios，关于代理的配置，如下： 在vue.config.js中配置： 以上这篇vue-cli 3.x 配置Axios(proxyTable)跨域代理方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
vue.js使用代理和使用Nginx来解决跨域的问题
11-27
使用Nginx 反向代理解决跨域问题（vue.js使用代理去掉vue.js因为跨域而触发的options请求） 我们的项目还是需要node.js作为容器的 一、Windows 下安装Nginx （官网下载稳定版http://nginx.org/en/download.html） 二、修改config里的nginx.conf文件的server server { listen 8899;// 你的端口 server_name localhost; root C:/ZOBSF_F/dist;//你打包部署的文件路径 #charset koi8-r; #access_log logs/host.ac
vue - vue.config.js中devServer配置方式
10-16
今天小编就为大家分享一篇vue - vue.config.js中devServer配置方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue.config.js中的devServer
左直拳的马桶_日用桶
08-10 1万+
你看vue3的语法，我感觉并不比vue2更高明，反而有种累赘和啰嗦的感觉，估计VUE4还要来个大改，折腾不止，至死方休。*.vue本身的内容较容易掌握，但更大的方面，比如它整个项目的运行机制，路由，配置，就比较讳莫如深了。资料很少，说的人也是不知从哪里抄的，没有说清楚。对于像我这样普通的开发者来说，让我不用啥框架，直接用空白项目捣鼓出一个看得过去的前端，我会感到困难重重，这也不知，那也不懂，无从下手。所以，别看它里面写了这么多，又是端口，又是代理，让人一看就头大，其实只是用于我们本机开发和调试。...
vue.config.js文件的devServer本地开发相关配置.
青颜的天空的博客
05-23 8184
vue.config.js文件的devServer本地开发相关配置
vue.config.js文件devServer字段的常用选项
m0_69057918的博客
11-22 842
devServer字段下的host、port、open、porxy选项作用解读
vue-cli3中vue.config.js配置教程详解
12-07
前言 vue-cli3推崇零配置，其图形化项目管理也很高大上。 但是vue-cli3推崇零配置的话，导致了跟之前vue-cli2的配置方式都不一样了。 别名设置，sourcemap控制，输入文件位置和输出文件位置和输出的方式，压缩js控制，打包webapck日志分析，externals忽略配置（外部引入），调试的端口配置，proxy接口配置等等的。 有时候还需要我们配置的，因为官方推荐的，并不适用于我们平时的开发所用的。 所以，我的vue.config.js配置是下面这样的。还有一个改hash的配置，暂时还不知道如何配置，以后会解决的，解决的时候顺便更新这里。 资料查询借鉴地址： https:
vue3+vite项目proxy代理使用小白篇
qq_39536826的博客
12-23 3730
vue3+vite使用代理proxy代理联调接口的小白篇
webpack之生产环境构建
weixin_43760969的博客
10-16 221
在实际应用中，我们会有开发模式和生产模式，webpack可以通过运行不同的命令行代码与运行对应的模式，vue-cli的原理一致 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt
vue代理proxy与开发环境、生产环境配置
weixin_61211370的博客
02-21 3354
vue代理proxy与开发环境、生产环境配置
ant design pro 代理
qq_39167934的博客
05-08 1393
一.注意在生产环境代理是无法生效的 二.代理配置 1.位置 config/config.ts proxy: { //代理以访问/service/api 开头的所有路由 '/service/api': { target: 'http://154.26.140.15:8000',//代理目标地址 changeOrigin: true,//开启跨域访问...
vue.config.js 中 devServer.proxy 配置说明，以及配置正确不生效问题
cc_King的博客
07-14 1万+
proxy 配置确认、解析 原因 一 配置写错 | 路径没有匹配上 原因二 因为种种原因，不走我们的代理 注意 详解 请求路径必须带有标识！！！ pathRewrite changeOrigin
Vue.config.js常用配置详解
Y18870954401的博客
07-19 2003
在生产环境下，将 publicPath 设置为 /sub-directory/ ，在开发环境下，将 publicPath 设置为 /。摘要：本文将介绍Vue.config.js中常用的配置选项，包括publicPath、outputDir、devServer、chainWebpack等，并提供相应的代码示例，帮助读者更好地理解和配置Vue项目。在上述示例中，我们将开发服务器的端口设置为 8080 ，并配置了一个代理，将以 /api 开头的请求代理到 http://localhost:3000。
vue - vue.config.js中devServer配置
热门推荐
idomyway的博客
06-30 10万+
前言     这里写你调用接口的基础路径，来解决跨域，如果设置了代理，那你本地开发环境的axios的baseUrl要写为''，即空字符串 只有一个接口ip端口时 devServer: { open: false, // 跨域 proxy: { '/nuojinadm/': { target: 'http:/...
vue.config.js配置devServer.proxy
09-13
在 vue.config.js 中，你可以使用 devServer.proxy 来配置代理。这个选项可以帮助你将 API 请求代理到其他的后端服务。 下面是一个示例配置的代码段： ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://example.com', // 将请求代理到这个目标地址 changeOrigin: true, // 设置为true，以便更改请求头中的Host字段为目标URL pathRewrite: { '^/api': '', // 将/api路径重写为空字符串 }, }, }, }, }; ``` 这个配置会将以 `/api` 开头的请求代理到 `http://example.com`。 例如，当你发送一个请求到 `/api/users` 时，它会被代理到 `http://example.com/users`。 你可以根据自己的需要进行配置，更多关于 devServer.proxy 的详细信息可以参考 Vue CLI 的官方文档。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值