踩坑-vue项目用webpack中devServer配置proxy代理解决跨域 不生效问题

最新推荐文章于 2024-07-02 18:56:53 发布
最新推荐文章于 2024-07-02 18:56:53 发布
阅读量4.7k 收藏 5
点赞数 3
分类专栏： vue webpack 文章标签： 前端 webpack proxy模式 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41554101/article/details/124983061
版权

vue项目用webpack中devServer配置proxy代理解决跨域 不生效问题

在前端配置允许跨域的情况下，登录接口写入cookie一直失败，导致后续接口请求发不出去跨域报401
后端在各种原因之下暂时无法解决，只能前端暂时配代理开发
在这里插入图片描述
但是代理配了之后发现一直不生效，仍然存在跨域问题
调试分析好久，发现是因为接口请求地址硬编码写全了，请求地址写的完整的ip+端口+路径
去掉IP+端口只留路径之后，代理就生效了
所以代理不生效的原因应该是 完整的接口地址 导致请求直接跳过了代理 使得代理无效。
proxy不生效的接口请求地址：http://xxx.xxx.xxx.xxx:xxxx/aa/bb/cc
proxy生效的接口请求地址：/aa/bb/cc

qq_41554101
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
proxy跨域不生效_配置proxy解决跨域问题
weixin_42525328的博客
12-24 4534
用一个最简单的方法解决API资源请求跨域问题：http-proxy-middlewarehttp-proxy-middleware不需要自己安装，在安装webpack过程中，会自动依赖安装到你的node_modules文件夹下，如果你发现没有，那么请自行安装npm install --save-dev http-proxy-middleware1、前端部署了nodejs服务器，采用app.list...
vue项目中使用webpack中的‘devServer.proxy‘配置解决代理跨域问题
qq_53985958的博客
06-29 398
条件场景：需要请求单独的后台服务器来获取数据，且配置了base api/base url ? 基础路径，发请求的时路径当中会出现配置的基础路径例：基于vue-admin-template模板进行二次开发，可在.env.development文件中进行/修改相关配置 需要使用到重写path的相应配置vue.config.js文件devServer:{proxy:{'/dev-api': {target: 'http://×××.××.×',pathRewrite:{'^/dev-api':''}}}.....
vue项目解决浏览器跨域，设置代理服务器
weixin_44432956的博客
03-13 446
代理（Proxy）也称网络代理，是一种特殊的网络服务，允许一个（一般为客户端）通过这个服务与另一个网络终端（一般为服务器）进行非直接的连接。如果是通过vue-cli脚手架工具搭建项目，我们可以通过webpack为我们起一个本地服务器作为请求的代理对象。同源策略（Sameoriginpolicy），是一种约定，它是浏览器最核心也最基本的安全功能。反之非同源请求，也就是协议、端口、主机其中一项不相同的时候，这时候就会产生跨域。通过axios发送请求中，配置请求的根路径。此外，还可通过服务端实现代理请求转发。
Vue的服务器代理如何配置
最新发布
ggq53219的博客
07-02 549
在Vue项目中配置服务器代理，主要是为了解决开发过程中的跨域问题，以及方便地将前端请求转发到后端服务器。
devServer.proxy不生效问题解决
k0933的博客
11-14 2599
devServer.proxy不生效问题解决
Vue项目打包部署上线时devServer.proxy代理失效如何解决？使用nginx的proxy_pass 代理跨域转发
热门推荐
Concise200的博客
03-22 2万+
本篇文章用于记录项目前端部署上线遇到的问题，包含对问题的思考、解决思路，以及从中获得的收获。正确的部署流程我也写了一篇文章，供大家参考。
vue.config.js 中 devServer.proxy 配置说明，以及配置正确不生效问题
cc_King的博客
07-14 1万+
proxy 配置确认、解析 原因 一 配置写错 | 路径没有匹配上 原因二 因为种种原因，不走我们的代理 注意 详解 请求路径必须带有标识！！！ pathRewrite changeOrigin
devServer 中 代理 proxy 不生效解决
zhang33565417的博客
03-06 1万+
问题描述： 今天在跑大佬开源的管理系统RuoYi-vue前后端分离版，因为对vue不怎么了解，部署前端vue部分的时候碰到了问题：访问后台接口的时候不走代理 报了404异常，我一看那个地方的路径不太对（但实际上是对的，这个地方是显示的代理前的地址） 然后我就在 vue.config.js 中的 devServer 下一顿改，都不行， devServer: { host: '0.0.0.0', port: port, open: true, proxy: {
详解webpack-dev-server 设置反向代理解决跨域问题
12-10
一、设置代理的原因 ...webpack-dev-server配置代理非常的方便，只需要条件一个proxy属性，然后配置相关的参数就可以了： var webpack = require('webpack'); var WebpackDevServer = require("webpack-dev-serv
详解webpack-dev-server使用http-proxy解决跨域问题
01-19
Vue-cli proxyTable 解决开发环境的跨域问题——虽然这篇是写vue的，不过用在webpack-dev-server上也是一样的 http-proxy-middleware——webpack-dev-server的实现方法其实是对这个的封装 配置http-proxy 在webpack...
Webpack devServer中的 proxy 实现跨域的解决
01-19
Vue-cli proxyTable 解决开发环境的跨域问题——虽然这篇是写vue的，不过用在webpack-dev-server上也是一样的 http-proxy-middleware——webpack-dev-server的实现方法其实是对这个的封装 配置http-proxy 在...
Vue使用Proxy代理后仍无法生效的解决
01-21
vue.js 配置了前端代理却未能生效 记录一下最近踩得小坑： 配置完代理后请一定重新执行（重要，非常重要！） npm run dev 若重新执行命令后，代理仍为生效，请按下方步骤进行检查： 检查index.js文件中的代理是否配置正确，示例如下： proxyTable: { '/api': { //代理标识 target: 'http://xxx.xxx.xxx',//指向的实际地址 changeOrigin: true, // 允许跨域 pathRewrite: { // 标识替换 // 原请求地址为 /api/getData 将'/api'替换''时
webpack-dev-server设置代理访问不成功，代理的代理访问方式设置
Best_Angel的专栏
10-23 2128
由于公司网络问题，需要外网访问网络，所以搭建了一个内部代理，通过这个代理，能够访问内网。 但是，在使用vue-cli构建的项目中，设置proxyTable的时候，由于设置的target是内网地址，不能正常访问到。 这时候，需要使用一个npm插件，`https-proxy-agent`，设置proxy如下，proxyServer即浏览器访问内网设置的代理地址： ```js const HttpsProxyAgent = require('https-proxy-agent'); devServ.
proxy跨域不生效_前端开发：深入使用proxy代理解决跨域问题
weixin_39911007的博客
02-02 3953
在前端领域里面，跨域指的是浏览器允许向服务器发送跨域请求，进而克服Ajax只能同源使用的局限性限制。同源策略是一种约定，而且是浏览器中最基本也是最核心的安全功能，若缺少了该策略，浏览器非常容易被***；同源就是指“协议+域名+端口”都一样，就算有两个不同域名指向同一个IP地址也不能是同源。同源策略只有在浏览器中存在，服务器中确不存在，所以遇到需要跨域请求的地址将其转发服务器后委托服务器去请求即可。...
proxy跨域不生效_webpack proxy 不生效
weixin_29028611的博客
12-24 1461
配置的代理未生效，还是会报跨域请求，请问下，配置哪里有问题谢谢wepack.config.dev.js:devServer: {inline: true,port: 3333,historyApiFallback: true,proxy: {'/crm-manage-web/': {target: 'http://192.168.27.27:7002',secure: true,changeOri...
抽丝剥茧：详述一次DevServer Proxy配置无效问题的细致排查过程
hello ice cream
05-12 1744
事情的起因是这样的，在一个已上线的项目中，其中一个包含登录和获取菜单的接口因响应时间较长，后端让我尝试未经服务转发的另一域名下的新接口，旧接口允许跨域请求，但新接口不允许本地访问（只允许发布测试/生产的域名访问）。
vue配置跨域无效问题
竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生
04-02 9788
vue配置proxy跨域代理后还是提示跨域问题 🔥多半是没有正确配置使用 proxy 检查配置使用 vue.config.js配置proxy devServer: { open: true, host:'88.1.131.35',//用来启动Network port: 8000, proxy: { '/api': { target: 'http://xxxxxxxxxx:8000', changeOri
webpack中，devServer.proxy跨域无效的解决办法
Haines
10-28 1747
webpack配置，平平无奇，很常规 重点是留意2个细节，那就是发起请求时，网址不要填写完整域名，用/开头即可。 第一个细节： 错误网址： 正确网址，用/开头即可 第二个细节 如果使用了axios,那么axios.defaults.baseURL这个功能一定要注释掉！ 如果使用了axios,那么axios.defaults.baseURL这个功能一定要注释掉！ 如果使用了axios,那么axios.defaults.baseURL这个功能一定要注释掉！ ...
vue.config.js中配置代理(devServer)不生效的坑（跨域问题处理
LlanyW的专栏
01-11 4329
尚硅谷的后台管理系统，用户与商品信息用的接口端口号不一样。需要配置多个proxy代理。
vue中怎么在devserver中解决跨域问题
04-21
可以通过配置webpack.dev.conf.js文件来解决vue中的跨域问题，具体方法如下： 1. 在config目录下新建一个文件proxyTable.js，用来配置跨域代理。 2. 在webpack.dev.conf.js文件中引用proxyTable.js文件，并在devServer中的proxy属性配置中增加proxyTable.js中的代理设置。 例如，你的后端服务地址是http://localhost:8080，而你的前端开发地址是http://localhost:8081，那么你可以在proxyTable.js文件中配置如下的代理： module.exports = { "/api": { target: "http://localhost:8080", changeOrigin: true, pathRewrite: { "^/api": "" } } } 在webpack.dev.conf.js文件中引用proxyTable.js文件，并在devServer中的proxy属性配置中增加上面的代理设置： const proxyTable = require('./proxyTable') devServer: { proxy: proxyTable } 这样，当你在前端访问/api/foo时，代理会将请求转发到http://localhost:8080/foo。这样就能解决vue中devserver的跨域问题了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值