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实现代理请求后,相当于浏览器与服务端中添加一个代理者

当本地发送请求的时候,代理服务器响应该请求,并将请求转发到目标服务器,目标服务器响应数据后再将数据返回给代理服务器,最终再由代理服务器将数据响应给本地。

在代理服务器传递数据给本地浏览器的过程中,两者同源,并不存在跨域行为,这时候浏览器就能正常接收数据

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

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

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

相关文章

代码随想录算法训练营Day35|LC860 柠檬水找零LC406 根据身高重建队列LC452 用最少数量的箭引爆气球

一句话总结:身高队列看起来不简单,实际上也很难。 原题链接:860 柠檬水找零 简单贪心思想即可。5元时加入cnt5,10元时cnt10,cnt5--, 20元时则优先找零10元再找零5元,这样最后判断是否在一次找零…

超全整理,软件测试-性能测试流程汇总,看这一篇就够了...

目录:导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜) 前言 性能测试&#xf…

Redis 教程系列之Redis 客户端连接(八)

Redis 通过监听一个 TCP 端口或者 Unix socket 的方式来接收来自客户端的连接,当一个连接建立后,Redis 内部会进行以下一些操作: 首先,客户端 socket 会被设置为非阻塞模式,因为 Redis 在网络事件处理上采用的是非阻塞…

2024年蓝牙耳机怎么选?五大爆火真无线蓝牙耳机推荐大公开!

​随着科技的进步,越来越多的用户倾向选择无线蓝牙耳机,摆脱有线耳机的束缚,享受更加自由的音乐体验。为了帮助大家选购到适合自己的蓝牙耳机,我整理了一些目前市面上我个人认为性能优异的款式,与大家分享。 一、蓝牙耳…

封装的charts使用 vue2

//组件 <template><div ref"chartRef" class"echart"></div> </template><script> import * as echarts from echartsexport default {data() {return {chart: null}},methods: {init() {if (!this.chart) {this.chart ech…

共享旅游卡见证旅游市场的活力与魅力!这个财富风口你抓住了吗?

共享旅游卡&#xff0c;探索旅游市场新活力&#xff0c;捕捉财富风口 暑期旅游热潮涌动&#xff0c;中国旅游研究院预测&#xff0c;今年暑期将成为五年来最为火爆的旅游季节。在6月至8月期间&#xff0c;国内旅游人数预计占全年出游总人数的近三成&#xff0c;旅游收入也有望…

typeScript5(元组)

数组一般由同种类型的值组成&#xff0c;但有时我们需要在单个变量中存储不同类型的值&#xff0c;这时候我们就可以使用元组。在 JavaScript 中是没有元组的&#xff0c;元组是 TypeScript 中特有的类型&#xff0c;其工作方式类似于数组。 元组最重要的特性是可以限制数组元…

龙哥风向标20240326 GPT拆解

视频号刷到一个便携折叠屏&#xff0c;直击商务用户群体痛点 盈利点&#xff1a;利用视频号平台上商务用户群体的需求&#xff0c;推出便携折叠屏产品&#xff0c;吸引高客单的商务用户群体&#xff0c;同时可以考虑拓展海外市场。 操作步骤&#xff1a; 通过视频号平台了解商…

通科技新品亮相:4K60编解一体,USB透传无忧

在信息化快速发展的今天&#xff0c;音视频技术的需求与应用场景日益丰富&#xff0c;特别是在对视频画质和实时性要求极高的领域中&#xff0c;如军警、公安、金融等&#xff0c;对音视频处理设备的性能要求更为严格。为满足这些高端应用场景的需求&#xff0c;视通科技紧跟时…

【MySql】MySQL表的结构

MySQL表的结构通常包含以下几个部分&#xff1a; 表名&#xff1a; 每个表都有一个唯一的名称&#xff0c;用于标识这个表。 字段&#xff1a; 表中的每一列被称为字段&#xff0c;每个字段都有一个名称和数据类型。如姓名、年龄、编号等。 记录&#xff1a; 表中的每一行被称…

【Node.js从基础到高级运用】十八、Node.js的安全性加固

引言 在Web开发中&#xff0c;安全性是一个不可忽视的话题。Node.js作为一个流行的后端平台&#xff0c;同样需要关注各种潜在的安全威胁&#xff0c;并采取措施加以防御。本文将介绍如何在Node.js应用中防御常见的Web攻击&#xff0c;以及如何使用安全相关的中间件来加固安全性…

24.Python从入门到精通—函数 标准模块 包

24.从入门到精通&#xff1a;__name__属性 dir(函数 标准模块 包 从一个包中导入* __name__属性dir() 函数标准模块包从一个包中导入* __name__属性 在Python中&#xff0c;每个模块&#xff08;module&#xff09;都有一个内置的属性name&#xff0c;用于表示模块的名称。这个…

MySQL-1.数据库的基本操作

1. 数据库的基本操作 show databases; information_schema&#xff1a;信息图式&#xff0c;存储服务器管理数据库的信息 mysql&#xff1a;存放系统信息&#xff0c;用户名密码等 performance_schema&#xff1a;性能图式 sys&#xff1a;系统文件 1.1 创建数据库-studen…

vue指令相关

vue中有很多的指令像v-on、v-model、v-bind等是我们开发中常用的 常用指令 v-bind 单向绑定解析表达式 v-model 双向数据绑定 v-for 遍历数组/对象/字符串 v-on 绑定事件监听,可简写为@ v-show 条件渲染(动态控制节点是否存展示) v-if 条件渲染(动态控制节点是否存存在) v…

Linux VFS机制详解

在深入探讨Linux操作系统内部机制时&#xff0c;我们无法忽视一个关键的核心组件——Linux Virtual File System (VFS)。VFS作为Linux内核中的重要组成部分&#xff0c;其主要作用是在用户空间应用程序与内核中多样化的物理文件系统之间搭建起一座桥梁&#xff0c;提供了一个抽…

套娃式大小AI群体导致AI觉醒吗?

一、“套娃式”AI训练 目前&#xff0c;我们所讨论的人工智能&#xff08;AI&#xff09;主要是基于机器学习和深度学习技术的算法系统。它们通过不断学习、优化和改进以完成特定任务&#xff0c;但并不具备自我意识或者独立的创造性思考能力&#xff0c;即“觉醒”。 “套娃式…

RHCE作业:搭建web网站

综合练习&#xff1a; 请给openlab搭建web网站 网站需求&#xff1a; 1.域名访问网站 基于域名www.openlab.com可以访问网站内容为 welcome to openlab!!! 2.创建界面 给该公司创建三个子界面分别显示学生信息&#xff0c;教学资料 和缴费网站&#xff0c;基于www.openlab.com…

Splashtop 荣获2024年 Globee® 卓越网络安全两大奖项

2024年3月25日 加利福尼亚州库比蒂诺 Splashtop 在简化随处办公领域处于领先地位&#xff0c;我们自豪地宣布荣获全球卓越企业权威机构 Globee 奖。Splashtop 凭借其安全工作空间解决方案&#xff08;即插即用安全访问平台&#xff0c;使 IT 部门能够简化零信任的实施&#xf…

算法笔记~—位运算

目录 常见位运算&#xff1a; 1、基础位运算 2、对于一个数n。确定、修改这个数n二进制x位。 3、提取&#xff08;确定&#xff09;一个数n最右侧的1&#xff08;bit&#xff09;与干掉最右侧的1&#xff08;bit&#xff09; 4、异或运算律 5、位运算的优先级&#xff1a…

vscode 配置c++环境——3个文件搞定!!!

前提&#xff1a; 在vscode中安装了c扩展 创建文件settings.json {"files.associations": {"string": "cpp","vector": "cpp","array": "cpp","atomic": "cpp","*.tcc"…