跨域之proxyTable——在开发和生产环境的不同配置

最新推荐文章于 2022-04-24 20:40:07 发布
最新推荐文章于 2022-04-24 20:40:07 发布
阅读量5.5k 收藏 21
点赞数 5
分类专栏： vue+element-ui 学习笔记 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Bonjourjw/article/details/95058069
版权

一、问题背景
     利用proxyTable配置之后，编译后生产环境部署失败
二、解决过程
     解决跨域问题又多种方法，网上又很多资料我就不再一 一列举了，直接上proxyTable的配置，我的项目是基于vue-cli脚手架搭建的，找到config/index.js中关于开发环境的配置，增加对proxyTable属性的配置，如下图所示：在这里插入图片描述
     利用axios发送请求的url都要在前加/api前缀，ok没问题，跨域成功解决，查看请求：
在这里插入图片描述
但编译打包放置到服务器端时，却发现报错了，请求的url前都有/api前缀，导致出错。很明显，回过头查看axios的配置，由于api直接写死在url中，对dev环境下，由于又proxyTable的配置，代理最终会自动将/api匹配为目标请求地址“

最低0.47元/天 解锁文章
Vue项目proxyTable反向代理，开发环境与生产环境下服务接口地址的自动匹配(1)
2401_84003839的博客
04-04 1112
小编的一位同事在校期间连续三年参加ACM-ICPC竞赛。从参赛开始，原计划每天刷一道算法题，实际上每天有时候不止一题，一年最终完成了 600+：凭借三年刷题经验，他在校招中很快拿到了各大公司的offer。入职前，他把他的刷题经验总结成1121页PDF书籍，作为礼物赠送给他的学弟学妹，希望同学们都能在最短时间内掌握校招常见的算法及解题思路。整本书，我仔细看了一遍，作者非常细心地将常见核心算法题和汇总题拆分为4个章节。
记录一次SpringBoot跨域的踩坑经历——SpringSecurity跨域解决方案(/oauth/token 401)
Harrison
04-23 2876
项目场景： 目前在重构一个导购后端系统，我负责用户的模块和登录鉴权的整个业务的架构设计和代码编写 利用SpringBoot + SpringSecurity + Oauth2完成了简单的登录和鉴权 登录功能：首先需要调用/oauth/token接口，根据用户名密码获取toke，拿到token后将token放入请求头Header中再去请求其它接口。 接口开发完成并使用Postman测试通过，再由前端去画页面联调接口。 问题描述： 问题就出现在了前端接口联调这里，前端是用Vue完成的，安装好Node
如何处理vue 使用proxyTable之后处理开发环境和生产环境路径问题
honey_seve7n的博客
10-04 2322
第一步. 修改vue ---config --- index.js dev中的内容 pathRewrite 重写 是为了在请求时baseUrl是显示为loacalhost:8080/ 而不是loacalhost:8080/food dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath...
Proxytable
RNG1433223的博客
07-15 609
同源策略： 浏览器针对js请求同源策略：默认请求协议，域名，端口都要相同，才能访问 服务端与服务端不存在访问跨域问题 解决方案： Proxytable 解决的原理; 案例：我们要从1100/a.html访问1101/ b.html 页面在发请求的时候就封装请求为1100/woaini/ b.html 这个请求就被发送不被拦截（端口一样） 请求被发送后，由proxyTable进行统一管理，在proxyTable内部对端口进行校对 proxyTable对路径查询由于已经定义但凡含有/woaini/…的请求都一致
proxyTable 代理
cai_ping_的博客
04-24 431
一般项目上都会采用前后端分离，如果服务器没有开启cors就会产生跨域问题，proxyTable 的出现就是为了让解决这一问题。 proxyTable是vue-cli脚手架在开发模式下，为我们提供的一个跨域的代理中转服务器服务。它是基于http-proxy-middleware插件的。 安装 npm install --save-dev http-proxy-middleware 使用 const proxyMiddleware = require('http-proxy-middlewar..
代理不同的环境
神zhi殇的博客
11-20 223
"start": "ng serve --proxy-config proxy.conf.json --port 4201 --disable-host-check true", "start-dev": "ng serve --proxy-config proxy.conf.dev.json --port 4201 --disable-host-check true", ...
Vue开发环境跨域访问问题
10-15
需要注意的是，这种代理只在开发环境中有效，生产环境部署时需要考虑其他方式来处理跨域问题，如在后端服务器上配置CORS头。 总结一下，Vue开发环境下的跨域访问问题可以通过配置`webpack-dev-server`的代理功能来...
详解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 在...
proxyTable讲解
u011200562的博客
10-26 504
为什么要使用proxyTable 浏览器的同源策略不允许跨域访问，所谓同源策略是指协议、域名、端口相同 在平时项目的开发环境中，经常会遇到跨域的问题，尤其是使用vue-cli这种脚手架工具开发时，由于项目本身启动本地服务是需要占用一个端口的，所以必然会产生跨域的问题。在使用webpack做构建工具的项目中使用proxyTable代理实现跨域是一种比较方便的选择。 如何使用proxyTable 还是拿之前使用过的vue-cli举例。我们首先要找到根目录下config文件夹下的index.js文件
vue跨域实现与原理（proxyTable）
热门推荐
weixin_44849078的博客
05-22 1万+
前后端联调往往会遇上跨域问题，本文描写的是vue项目的跨域实现及其原理。
跨域请求解决方案之一：proxyTable
weixin_42492766的博客
08-08 292
原因：浏览器的同源策略不允许跨域访问，所谓同源策略是指协议、域名、端口相同。 解决：采用proxyTable解决。 proxyTable是什么？ vue-cli提供的解决vue开发环境下跨域问题的方法，proxyTable的底层使用了http-proxymiddleware，文档查询来自（https://github.com/chimurai/http-proxy-middleware），它是ht...
通过设置proxyTable实现调用接口跨域
lianwenxiu的博客
05-06 184
proxyTable: { '/api': { target: 'http://10.10.10.47:10003', //服务器目标接口域名 changeOrigin: true, //是否跨域 pathRewrite: { '^/api': '' //路径接口 } } }
Vue的proxyTable解决跨域问题
lirunhui6的博客
11-01 409
找到config文件夹下的index.js文件，修改proxytable参数 proxyTable: { '/api': { target: 'http://127.0.0.1:8081',//请求的接口域名 changeOrigin: true,//允许跨域 pathRewrite: { '^/api': '/'//替换 请求/api/index...
vue 使用 proxyTable 解决跨域问题
weixin_30323631的博客
02-28 131
1、在 main.js 中，在引入 axios： import axios from 'axios' Vue.config.productionTip = false Vue.prototype.$axios = axios //将axios挂载在Vue实例原型上 // 设置axios请求的token axios.defaults.headers.common['token...
proxyTable设置代理解决跨域问题
qq_38472451的博客
04-16 151
proxyTable设置代理解决跨域问题
Vuejs2.0 利用proxyTable实现跨域请求
ken_ding的博客
12-18 3619
前言： 本地项目在请求远端服务器接口时，不可避免的会遇到跨域问题,即便是设置了Access-Control-Allow-Origin：* ，在遇到登录这些需要本地存入cookie的也会很头痛，这里笔者介绍一个在vue-cli中配置代理来解决的办法。在~/config/dev-server.js中 使用了非常强大的http-proxy-middleware 包。更多高级用法，请查阅其文档。用法：比如
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值