devServer下的changeOrigin解释

已于 2023-02-04 19:54:47 修改
阅读量851 收藏
点赞数
分类专栏： webpack 文章标签： 前端
于 2023-02-04 19:21:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aexwx/article/details/128884640
版权

webpack与vite的devServer下的changeOrigin属性，

如果为true，表示服务端收到的headers.host就是服务器本身所在的ip地址

 如果为false,表示服务端收到的headers.host就是开发者电脑所在的ip地址,即开发者浏览器地址栏显示的地址

changeOrigin无论是true还是false,都不会影响发送“请求网址‘，只会影响koa服务器方的host值

另外”请求网址“的构成方式分2种

第一种是axios.get('/xxxx')+BaseURL=’‘那么控制台显示的请求网址就是浏览器地址的域名+axios的请求路径

第二种是axios.get('/xxxx')+BaseURL=’http://baidu.com‘，那么控制台显示的请求网址就是http://baidu.com+axios的请求路径

所以，开发模式下baseURL应设为空字符串，否则会影响proxy进行代理请求

vite下的devServer写法

大猫会长
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
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/'
使用webpack-dev-server处理跨域请求的方法
12-11
在这个配置文件中，寻找 `devServer` 对象，看是否包含 `proxy` 配置项。如果已经存在但被注释掉了，需要取消注释；如果不存在，我们需要手动添加。 ```javascript devServer: { // ... proxy: config.dev.proxy...
vue用vite配置代理解决跨域问题（target、rewrite和changeOrigin的使用场景）
最新发布
weixin_44161385的博客
06-04 1879
vue配置解决跨域
当devserver的changeOrigin没用，后端还用了same-origin！就这么处理
weixin_38629440的博客
11-10 131
changeOrigin: true, pathRewrite: { ['^/' + process.env.VUE_APP_BASE_API]: '' }, headers:{ //改写Origin,注意结尾不含 / Origin:"http://112.28.109.249:9997", //改写Referer Referer:"http://112.28.109.249:9997/", H...
原来我误会了 changeOrigin 这么多年
昆吾kw的博客
10-08 6089
本文简单探讨了这个常见的配置项。用了这么多年，才发现一直“误会”了它。看来正应了那句老话：纸上得来终觉浅，绝知此事要躬行。
vue - vue.config.js中devServer配置方式
10-16
今天小编就为大家分享一篇vue - vue.config.js中devServer配置方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-cli3+ TS 跨域配置之changeOrigin
山海也有意难平
03-04 3272
proxyObj['/sx'] = { // 本地后端地址 target: 'http://192.168.3....', changeOrigin: false, pathRewrite: { '^/sx': 'sx' } } module.exports = { // 单位电脑 devServer: { host: '192.168.3....', port: 8888, proxy: proxyObj } } changeOrigin vue3和vue2 默认值 不一样 踩过的坑: .
vue中 devServer
qq_42692714的博客
04-29 6038
在vue项目根目录中创建一个js vue.config.js module.exports = { runtimeCompiler: true, devServer: { proxy: { // 匹配请求路径中的字符， // 如果符合就用这个代理对象代理本次请求，路径为target的网址， // chang...
webpack 配置 changeOrigin 无效的说明（转载）
寬真
04-14 853
简单明了，反正我是差点忘了。 以下这段话来自官网：https://webpack.js.org/configuration/dev-server/#devserverproxy The origin of the host header is kept when proxying by default, you can setchangeOrigintotrueto override this behaviour. It is useful in some cases like usingna...
webpack之devServer配置及说明
@tangguo123 博客
07-11 1295
webpack/devServer配置
Webpack devServer中的 proxy 实现跨域的解决
08-27
Webpack devServer 的 `proxy` 选项是一个非常实用的功能，它允许开发者在开发环境中轻松地解决跨域问题。在实际开发中，我们经常会遇到由于浏览器同源策略限制导致的跨域问题，这使得前端应用无法直接访问不同源的...
vue配置的devServer
kaixindewanshua的博客
09-28 619
如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。 devServer配置开发环境服务器。 DEV_SERVER=http://10.10.201.87 REQUEST_PRE=/req //api.js export default { getTableData(options) { return new Promise( resolve => { Request.ge
webpack中proxy 中changeOrigin
热门推荐
qq_37016928的博客
08-08 4万+
changeOrigin默认是false：请求头中host仍然是浏览器发送过来的host proxy:{ "/test/api":{ traget: "www.aaa.com", changeOrigin: true, pathReWrite: {"/test", ""}, } } 如果设置成true：发送请求头中host...
06-devServer
mjjhen的博客
09-22 102
前言 本文章来源于王红元老师（coderwhy）的 Vue3 + Ts 课程 附上链接：https://ke.qq.com/course/3453141 谁能拒绝一个100目录前言为什么要搭建本地服务器？webpack-dev-server认识模块热替换（HMR）开启HMR框架的HMRHMR的原理HMR的原理图hotOnly、host配置port、open、compressProxychangeOrigin的解析historyApiFallbackresolve模块解析确实文件还是文件夹extensions
Webpack changeOrigin 无效，不生效？
Arvo's Log
10-08 5902
webpack dev server 底层使用的http服务的库是 https://github.com/http-party/node-http-proxy#readme，看了下源码 发现当我们设置了 changeOrigin 后，实际上底层只会修改 header 的 host 字段。如果有些服务有针对 header 中的 origin 或 referer 字段做判断，这时候需要额外处理，de...
Vue devServer proxy 配置 /
sinat_31327113的博客
10-29 211
// 之前的配置 proxy: { '/': { target: '******', changeOrigin: true, }, }, // 修改后的皮遏制 proxy: { '/api': { target: 'https://******.cn/', changeOrigin: true, }, '/graphql': { ...
前后端分离跨域changeOrigin:true是否需要
weixin_53689300的博客
04-19 3742
介绍：在Vue中，changeOrigin:true是一个可选的配置项，用于设置是否改变请求头中的origin属性。当设置为true时，请求头中的origin属性会被改变为目标服务器的地址，以避免跨域问题。这个配置项通常用于开发环境中，当我们需要在本地开发环境中调用远程服务器的API时，需要设置changeOrigin:true来避免跨域问题。在生产环境中，这个配置项通常不需要设置，使用默认即可。解决跨域的方法，这是其中一种打开页面发送请求。
web学习之js写计算器
2401_84435866的博客
04-27 915
off_on {p,h1 {font-family: 楷体;
uniapp devServer
09-01
UniApp 是一个跨平台的开发框架，可以同时开发运行在多个平台上的应用程序，如小程序、H5、Android、iOS等。devServer 是 UniApp 开发环境中的一个配置，用于启动本地开发服务器。 在 UniApp 中，devServer 主要用于开发阶段的调试和测试。它提供了一些常见的配置选项，可以自定义开发服务器的行为。一般来说，可以通过修改 `vue.config.js` 文件来进行 devServer 的配置。 以下是一个示例的 devServer 配置示例： ```javascript // vue.config.js module.exports = { devServer: { host: 'localhost', port: 8080, https: false, open: true, proxy: { '/api': { target: 'http://localhost:3000', ws: true, changeOrigin: true } } } } ``` 上述配置中，我们设置了开发服务器的主机地址为 `localhost`，端口号为 `8080`，关闭了 HTTPS，设置了自动打开浏览器，在开发环境下使用代理将 `/api` 请求转发到目标地址 `http://localhost:3000`。 通过这样的配置，我们可以在开发阶段通过访问 `http://localhost:8080` 来调试和测试 UniApp 项目。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值