webpack基础知识七:说说webpack proxy工作原理?为什么能解决跨域?

news2024/11/15 6:59:43

在这里插入图片描述
一、是什么

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.coloradmin.cn/o/840603.html

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

相关文章

三个主流数据库(Oracle、MySQL和SQL Server)的“单表造数

oracle 1.创建表 CREATE TABLE "YZH2_ORACLE" ("VARCHAR2_COLUMN" VARCHAR2(20) NOT NULL ENABLE,"NUMBER_COLUMN" NUMBER,"DATE_COLUMN" DATE,"CLOB_COLUMN" CLOB,"BLOB_COLUMN" BLOB,"BINARY_DOUBLE_COLU…

flask-----蓝图

1.引入蓝图 flask都写在一个文件中,项目这样肯定不行,会导致循环导入的问题,分目录,分包,使用蓝图划分目录。 2.使用蓝图 步骤如下: -1 实例化得到一个蓝图对象-order_blueBlueprint(order,__name__,tem…

Linux(环境变量)

Linux(环境变量) 常见环境变量查看环境变量方法和环境变量相关的指令环境变量的组织方式通过代码如何获取环境变量 环境变量(environment variables)一般是指在操作系统中用来指定操作系统运行环境的一些参数如:我们在编写C/C代码的时候&…

Goland设置运行时配置指定配置文件

目录 遇到了问题--GoLand读取不到配置文件的命令行参数查找问题解决 遇到了问题–GoLand读取不到配置文件的命令行参数 今天在命令行执行go run user.go -f etc/user.yaml依此来指定程序运行时的配置文件,最后可以运行。 但是这种方式运行,我就没法在G…

error C4430 缺少类型说明符 - 假定为 int。注意 C++ 不支持默认 int

出现原因:两个类头文件相互包含 使用声明类代替头文件包含

基于vue医院分时段预约挂号系统java病历管理系统snsj0

伴随着我国社会的发展,人民生活质量日益提高。互联网逐步进入千家万户,改变传统的管理方式,医院病历管理系统以互联网为基础,利用java技术,和mysql数据库开发设计一套医院病历管理系统,提高工作效率的同时&…

【学习笔记】Java安全之反序列化

文章目录 反序列化方法的对比PHP的反序列化Java的反序列化Python反序列化 URLDNS链利用链分析触发DNS请求 CommonCollections1利用链利用TransformedMap构造POC利用LazyMap构造POCCommonsCollections6 利用链 最近在学习Phith0n师傅的知识星球的Java安全漫谈系列,随…

QT生成可执行文件的步骤

QT生成可执行文件的步骤 第一步:debug为release,然后进行编译 第二步:添加QT生成必要的库 首先,建立一个新的文件夹,然后将Release中的可执行文件拷贝到新的文件夹中 然后,在新建文件夹中生成必要的库 …

Docker学习(二十四)报错速查手册

目录 一、This error may indicate that the docker daemon is not running 报错docker login 报错截图:原因分析:解决方案: 二、Get "https://harbor.xxx.cn/v2/": EOF 报错docker login 报错截图:原因分析&#xff1a…

vue3部署宝塔后请求接口404以及刷新页面404的问题解决方案

技术:vue3.2.13 UI框架:element-plus 2.1.1 服务器:腾讯云Centos系统宝塔面板 Nginx:1.22.1 前提:宝塔面板》网站PHP项目 已经新建了项目 1.处理vue页面刷新报错404 如上图,在PHP网站》设置》配置文件,新增如下代码…

EMD经验模态分解介绍

EMD概述 其实一种信号分解方法,是一种自适应的数据处理方法,适合非线性和非平稳时间序列的分析和研究,其本质是对数据序列或信号的平稳化处理。 将上面6个信号叠加如下: 就是6个简单信号叠加,形成一个复杂信号。 核心…

【雕爷学编程】Arduino动手做(184)---快餐盒盖,极低成本搭建机器人实验平台3

吃完快餐粥,除了粥的味道不错之外,我对个快餐盒的圆盖子产生了兴趣,能否做个极低成本的简易机器人呢?也许只需要二十元左右 知识点:轮子(wheel) 中国词语。是用不同材料制成的圆形滚动物体。简…

JavaWeb三大组件——Listener

目录 Listener 八个Web监听器 注册Listener 父pom文件 pom文件 使用注解方式 ServletListener HelloServlet 启动类 通过RegistrationBean注册 ServletListener HelloServlet MyWebConfig 启动类 运行结果 Listener 作用:监听某个事件的发生&#xf…

区块链实验室(16) - FISCO BCOS实验环境

经过多次重复,建立一个FISCO BCOS实验环境。该环境是一个VMWare虚拟机,能够启动FISCO BCOS自创建的4节点区块链,不必下载依赖包即可编译Fisco Bcos目标文件,安装有VsCode1.81版本。 启动4节点的Fisco Bcos区块链 启动控制台 编译…

CHI(六)独占访问

AMBA5 CHI Architecture Specification IssueF 1. overview 独占访问的原则是,执行独占序列的逻辑处理器(LP)执行以下操作: 对一个地址执行exclusive load。计算要存储到该位置的新值。对该地址进行exclusive store。 支持对可…

【肺炎分类数据集】数据量非常充足的新冠肺炎分类数据共享

一、肺炎数据集介绍🍉: 1.1 格式🎈 按照标准的格式分为了①训练集train(134138575198张),②验证集val(8816张),③测试集test(234390624张)&#…

redis入门3-在java中操作redis

Redis的java客户端 Jedis、Lettuce、Redisson、以及spring提供的spring data redis Jedis操作redis //添加依赖 <dependency><groupId>redis.clients</groupId><artifactId>jedis</artifactId><version>2.8.0</version> </dep…

DAY3,C高级(shell中的变量、数组、算术运算、分支结构)

1.今日思维导图&#xff1b; 2.判断家目录下&#xff0c;普通文件的个数和目录文件的个数&#xff1b; 1 #!/bin/bash2 arr1(ls -la ~/ | cut -d r -f 1 | grep -w -)3 arr2(ls -la ~/ | cut -d r -f 1 | grep -w d)4 echo "普通文件个数&#xff1a;${#arr1[*]}"5 e…

SpringCloud深度学习(在更)

微服务简介 微服务是什么&#xff1f; 微服务是一种架构风格&#xff0c;将一个大型应用程序拆分为一组小型、自治的服务。每个服务都运行在自己独立的进程中&#xff0c;使用轻量级的通信机制&#xff08;通常是HTTP或消息队列&#xff09;进行相互之间的通信。这种方式使得…

Tensorrt 原生Activate 算子讲解

Tensorrt operators docs&#xff1a; Activation Apply an activation function on an input tensor A and produce an output tensor B with the same dimensions. import numpy as np from cuda import cudart import tensorrt as trt # 输入张量 NCHW nIn, cIn, hIn, wI…