说说webpack proxy工作原理?为什么能解决跨域?

在这里插入图片描述


文章目录

  • 一、是什么
  • 二、工作原理
  • 三、跨域
  • 参考文献


一、是什么

webpack proxy,即webpack提供的代理服务

基本行为就是接收客户端发送的请求后转发给其他服务器

其目的是为了便于开发者在开发模式下解决跨域问题(浏览器安全策略限制)

想要实现代理首先需要一个中间服务器,webpack中提供服务器的工具为webpack-dev-server

webpack-dev-server
webpack-dev-server是 webpack 官方推出的一款开发工具,将自动编译和自动刷新浏览器等一系列对开发友好的功能全部集成在了一起

目的是为了提高开发者日常的开发效率,只适用在开发阶段

关于配置方面,在webpack配置对象属性中通过devServer属性提供,如下:

// ./webpack.config.js
const path = require('path')module.exports = {// ...devServer: {contentBase: path.join(__dirname, 'dist'),compress: true,port: 9000,proxy: {'/api': {target: 'https://api.github.com'}}// ...}
}

devServetr里面proxy则是关于代理的配置,该属性为对象的形式,对象中每一个属性就是一个代理的规则匹配

属性的名称是需要被代理的请求路径前缀,一般为了辨别都会设置前缀为/api,值为对应的代理匹配规则,对应如下:

  • target:表示的是代理到的目标地址
  • pathRewrite:默认情况下,我们的 /api-hy 也会被写入到URL中,如果希望删除,可以使用pathRewrite
  • secure:默认情况下不接收转发到https的服务器上,如果希望支持,可以设置为false
  • changeOrigin:它表示是否更新代理后请求的 headers 中host地址

二、工作原理

proxy工作原理实质上是利用http-proxy-middleware 这个http代理中间件,实现请求转发给其他服务器

举个例子:

在开发阶段,本地地址为http://localhost:3000,该浏览器发送一个前缀带有/api标识的请求到服务端获取数据,但响应这个请求的服务器只是将请求转发到另一台服务器中

const express = require('express');
const proxy = require('http-proxy-middleware');const app = express();app.use('/api', proxy({target: 'http://www.example.org', changeOrigin: true}));
app.listen(3000);// http://localhost:3000/api/foo/bar -> http://www.example.org/api/foo/bar

三、跨域

在开发阶段, webpack-dev-server 会启动一个本地开发服务器,所以我们的应用在开发阶段是独立运行在 localhost的一个端口上,而后端服务又是运行在另外一个地址上

所以在开发阶段中,由于浏览器同源策略的原因,当本地访问后端就会出现跨域请求的问题

通过设置webpack proxy实现代理请求后,相当于浏览器与服务端中添加一个代理者

当本地发送请求的时候,代理服务器响应该请求,并将请求转发到目标服务器,目标服务器响应数据后再将数据返回给代理服务器,最终再由代理服务器将数据响应给本地
在这里插入图片描述
在代理服务器传递数据给本地浏览器的过程中,两者同源,并不存在跨域行为,这时候浏览器就能正常接收数据

注意:服务器与服务器之间请求数据并不会存在跨域行为,跨域行为是浏览器安全策略限制


参考文献

  • https://webpack.docschina.org/configuration/dev-server/#devserverproxy

希望本文能够对您有所帮助!如果您有任何问题或建议,请随时在评论区留言联系 章挨踢(章IT)
谢谢阅读!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/775779.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

电路仿真软件大比拼:哪款更适合你?

以下是关于市面上常见的四款电路仿真软件的整体介绍: 1. Multisim(美国,美国国家仪器(NI)有限公司) 特点与优势: 直观的图形界面:提供用户友好的界面,便于快速搭建和修…

机器学习的分类——无监督学习(Unsupervised Learning)

无监督学习(Unsupervised Learning)是机器学习中的一种重要分类,它与监督学习的主要区别在于训练数据没有标签。无监督学习的目的是探索数据本身的结构和模式,而不是预测或分类具体的输出。这种学习方式对于发现数据中的隐藏模式和…

Openstack创建和操作实例,实现与外部网络通信

一、熟悉OpenStack图形界面操作 1、了解Horizon项目 Horizon项目 各OpenStack服务的图形界面都是由Horizon提供的。Horizon提供基于Web的模块化用户界面。Horizon为云管理员提供一个整体的视图。Horizon为终端用户提供一个自主服务的门户。Horizon由云管理员进行管理与控制&a…

SQL函数操作——3、数据统计综合应用

任务描述 本关任务: 灵活使用分组操作和聚集函数解决比较复杂的数据统计问题 本关使用的关系说明: product(maker,model,type) maker:表示生产厂商 model:生产的产品型号 type:产品类型,有pc laptop两种 pc(model…

面试题解析:bind,call,apply的区别(2)

在面试的过程中,面试官很有可能会问到我们有关this的相关内容。那么关于this我们都知道在 JavaScript 中,this 是一个特殊关键字,它指向当前函数执行时的上下文对象。 this 的值取决于函数被调用的方式: 全局上下文中的 this: 当…

语音陪玩交友软件系统程序-app小程序H5三端源码交付,支持二开!

电竞行业的发展带动其周边产业的发展,绘制着游戏人物图画的抱枕、鼠标垫、海报销量极大,电竞游戏直播、游戏教程短视频也备受人们喜爱,自然,像游戏陪练、代练行业也随之生长起来,本文就来讲讲,从软件开发角…

【字节二面】SpringBoot可以同时处理多少请求

目录 一、示例代码二、那么springboot可以处理多少请求?三、maxConnections、maxThreads、acceptCount的关系 一、示例代码 RestController Slf4j public class RequestController {GetMapping("/test")public String test(HttpServletRequest request) …

mysql_数据_增删改查

DML(数据操作语言) 添加数据 指定字段:INSERT INTO 表名 (字段名1, 字段名2, ...) VALUES (值1, 值2, ...); 全部字段:INSERT INTO 表名 VALUES (值1, 值2, ...); 批量添加数据:INSERT INTO 表名 (字段名1, 字段名2…

vscode ai插件“通义灵码”

文章目录 vscode ai插件“通义灵码”为什么安装?官网主要功能 vscode ai插件“通义灵码” 为什么安装? 通义灵码,是阿里云出品的一款基于通义大模型的智能编码辅助工具,提供行级/函数级实时续写、自然语言生成代码、单元测试生成…

腾讯放大招了!AniPortrait开源上线!音频驱动逼真人像动画合成!人人都是歌手!

文章链接:https://arxiv.org/pdf/2403.17694 github链接:https://github.com/Zejun-Yang/AniPortrait 本文提出了AniPortrait,一个新颖的框架,用于生成由音频和参考肖像驱动的高质量动画。方法分为两个阶段。首先,从音…

linux i2c-tools使用总结

1,安装iic-tools sudo apt install i2c-tools -y 2,查看有几条iic总线 [root@sino-platform:/root]# ls /dev/i2c- i2c-0 i2c-1 i2c-2 i2c-3 3,查看i2c命令 [root@sino-platform:/root]# i2c i2cdetect i2cdump i2cget i2cset 4,iic-help命令 [root@sino-platform…

P1093 [NOIP2007 普及组] 奖学金 Python 列表中的字典元素

[NOIP2007 普及组] 奖学金 题目背景 NOIP2007 普及组 T1 题目描述 某小学最近得到了一笔赞助,打算拿出其中一部分为学习成绩优秀的前 5 5 5 名学生发奖学金。期末,每个学生都有 3 3 3 门课的成绩:语文、数学、英语。先按总分从高到低排…

【vue3学习笔记(二)】(第141-143节)初识setup;ref函数_处理基本类型;ref函数_处理对象类型

尚硅谷Vue2.0Vue3.0全套教程丨vuejs从入门到精通 本篇内容对应课程第141-143节 课程 P141节 《初识setup》笔记 1、setup是所有组合式API“表演的舞台”,组件中所用到的所有数据、方法、监视数据、生命周期钩子等都需要配置在setup中。 2、setup的两种返回值&…

深入解析Oracle数据库ORA-01427错误:单行子查询返回多行的问题与解决办法

深入解析Oracle数据库ORA-01427错误:单行子查询返回多行的问题与解决办法 1、引言2、错误描述3、常见场景与示例4、解决方案5、声明 1、引言 在Oracle数据库日常运维与开发过程中,经常会遇到ORA-01427错误,这是一个很典型的数据库错误提示&am…

maya 导入导出anim脚本

目录 maya导入anim文件 测试ok maya导入anim文件,mel命令 maya导出anim文件 mel脚本 测试ok maya导出anim文件 python脚本 测试ok

Go语言介绍以及如何在Go语言中操作MySQL数据库

人不走空 🌈个人主页:人不走空 💖系列专栏:算法专题 ⏰诗词歌赋:斯是陋室,惟吾德馨 目录 🌈个人主页:人不走空 💖系列专栏:算法专题 ⏰诗词歌…

「Nginx」Nginx配置详解

「Nginx」Nginx配置详解 参考文章1、正向代理和方向代理2、指定域名允许跨域 参考文章 1、Nginx反向代理 2、nginx配置详解 3、Nginx服务器之负载均衡策略(6种) 1、正向代理和方向代理 2、指定域名允许跨域 map $http_origin $allow_cors {default 1;…

uniApp使用XR-Frame创建3D场景(6)播放模型动画

上篇文章讲述了如何将XR-Frame作为子组件集成到uniApp中使用 这篇我们讲解播放模型动画 先看源码 <xr-scene render-system"alpha:true" bind:ready"handleReady"> <xr-node visible"{{sec6}}"><xr-light type"ambient&qu…

【Qt学习】了解Qt文件系统 + 利用QFile类实现记事本功能

文章目录 1. 前言 - 关于Qt文件1.1 QIODevice 介绍1.2 QFile 介绍1.2 打开文件的方式 2. 实例 - 记事本功能2.1 功能实现2.2 getOpenFileName() 与 getSaveFileName() 的区别2.3 效果演示 3. 资源文件 1. 前言 - 关于Qt文件 文件操作 是应⽤程序必不可少的部分&#xff0c;Qt作…

android 消息提醒

1.创建 MyBackgroundService.java 继承 Service public class MyBackgroundService extends Service {Overridepublic void onCreate() {super.onCreate();Log.i("业务服务", "开起业务服务");//调用服务后在页面手机上创建一个通知消息。if (android.os…