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

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

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

相关文章

C++左值引用与右值引用

0.类型和值类别的区别? 类型(type)和值类别(value category) 1.类型指的是数据类型,int,char这样的内置类型,类型主要是用来区别它们的字节大小。除了内置类型还有自定义类型&…

【ESP-BOX-LITE】:照片查看器

目录 项目场景: 项目需求描述: 项目技术: 项目成果: 项目总结: 项目视频: 芳香 项目场景: 使用ESP-BOX-LITE实现照片查看器功能,显示多级目录下的图片或文件夹,自…

二进制部署k8s

常见的K8S安装部署方式 ●Minikube Minikube是一个工具,可以在本地快速运行一个单节点微型K8S,仅用于学习、预览K8S的一些特性使用。 部署地址:https://kubernetes.io/docs/setup/minikube ●Kubeadm Kubeadm也是一个工具,提供…

vue3中使用vue3-pdf-app和使用浏览器内置的PDF插件浏览器PDF文件

文章目录 先准备一个PDF使用浏览器内置的PDF插件预览PDF在HTML中使用浏览器插件预览PDFVscode使用插件发布服务后直接通过URL地址访问PDF可使用的浏览器 在vue3项目中预览PDF文件vue3项目也是可以通过URL地址访问文件的vue3中使用浏览器内置的PDF插件预览PDF代码如下所示&#…

京东数据分析:2023厨房小电市场遇冷,空气炸锅等明星产品被抛弃

过去几年间,宅经济的爆发带火了酸奶机、煮蛋器、豆浆机、空气炸锅、养生壶等,一众外观小巧、功能丰富、价格相对便宜的厨房小家电。但随着年轻人走出家门回归工作岗位,厨房小家电们却步入了艰难时刻。 如今,厨房小家电们似乎正在经…

blender怎么在一个面上对半切割(不影响别的面)

1进入编辑模式 2.在面选择模式下,选中该物体需要切割成两半的面。 3.按K这个快捷键(切记,必须得用快捷键,不用的话没办法调出第一个绿色切割点),将切割点移动到需要切割的起始边,按住Shift键不放…

第六节:Word中对象的层次结构

《VBA之Word应用》(10178982),是我推出第八套教程,教程是专门讲解VBA在Word中的应用,围绕“面向对象编程”讲解,首先让大家认识Word中VBA的对象,以及对象的属性、方法,然后通过实例让…

[Linux 基础] make、Makefile自动化构建代码工具

文章目录 1、make与Makefile是什么2、为什么要有make与Makefile3、怎么实现一个Makefile文件3.1 如何编写Makefile文件3.1.1 依赖关系3.1.2 依赖方法 3.2 如何清理项目3.2.1 如何编写3.2.2 clean详解 3.3 make的使用3.4 原理3.4.1 查看文件修改时间 1、make与Makefile是什么 m…

为什么索引要用B+树来实现呢,而不是B树

首先,常规的数据库存储引擎,一般都是采用 B 树或者 B树来实现索引的存储。 B树 因为 B 树是一种多路平衡树,用这种存储结构来存储大量数据,它的整个高度会相比二叉树来说,会矮很多。 而对于数据库来说,所有…

Java日志系统之Logback

目录 Logback Logback的简单使用 Logback配置文件 log4j.peoperties转化为logback.xml Logback Logback的性能要比log4j要好。 Logback分为三个模块: logback-core:其他两个模块的基础模块logback-classic:它是log4j的一个改良版本&am…

小白也会的校园网宽带拨号自动重连设置

开始菜单搜索“任务计划程序”:我这个开始菜单和你们的不太一样,用了StartAllBack设置的,总之能找到这个程序就行了 提示:可以按下“Win R”,打开“运行”,输入taskschd.msc来打开任务计划程序 点击“任务…

最新咸鱼签名JS逆向分析教程

本章教程,主要分享一下咸鱼H5网页端sign签名算法。 案例地址:https://h5.m.goofish.com/item?id=744640763988 程仅供参考,请勿滥用,由此带来的法律责任,需由自己承担。 目录 一、参数分析 二、逆向过程

浅谈 docker run 命令中的 -i -t 和 -d 选项

以 docker Ubuntu 镜像为例,ubuntu镜像启动时默认执行的命令是"/bin/bash"。 文章目录 不带任何选项带 -i 选项带 -i 和 -t 选项-d 选项 不带任何选项 rootubuntu20:~# docker run ubuntu:20.04 rootubuntu20:~# docker ps CONTAINER ID IMAGE …

【Unity地编细节】为什么Unity笔刷在地形上面刷不出来

👨‍💻个人主页:元宇宙-秩沅 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 本文由 秩沅 原创 😶‍🌫️收录于专栏:unity细节和bug 😶‍🌫️优质专栏 ⭐【…

渗透测试tomcat错误信息泄露解决办法

解决方法&#xff1a; 1、使用tomcat8.5.16&#xff0c;会重定向非法url到登录url 2、配置server.xml&#xff0c;加上 <Valve className"org.apache.catalina.valves.ErrorReportValve" showReport"false" showServerInfo"false" />配置…

Linux:firewalld防火墙-基础使用(2)

上一章 Linux&#xff1a;firewalld防火墙-介绍&#xff08;1&#xff09;-CSDN博客https://blog.csdn.net/w14768855/article/details/133960695?spm1001.2014.3001.5501 我使用的系统为centos7 firewalld启动停止等操作 systemctl start firewalld 开启防火墙 systemct…

There are not enough slots available in the system to satisfy the 48 slots报错

文章目录 问题描述解决办法 问题描述 多核运行时出现这个错误&#xff0c;减少核数运行正常 解决办法 输出命令 vim ~/.bashrc添加 alias mpirunmpirun --oversubscribe执行命令 source ~/.bashrc解决。

nginx安装详细步骤和使用说明

下载地址&#xff1a; https://download.csdn.net/download/jinhuding/88463932 详细说明和使用参考&#xff1a; 地址&#xff1a;http://www.gxcode.top/code 一 nginx安装步骤&#xff1a; 1.nginx安装与运行 官网 http://nginx.org/1.1安装gcc环境 # yum install gcc-c…

Power BI 傻瓜入门 1. 数据分析术语:Power BI风格

本章内容包括&#xff1a; 了解Power BI可以处理的不同类型的数据了解您的商业智能工具选项熟悉Power BI术语 数据无处不在。从你醒来的那一刻到你睡觉的时候&#xff0c;某个系统会代表你收集数据。即使在你睡觉的时候&#xff0c;也会产生与你生活的某些方面相关的数据。如…

一款功能强大的音乐曲谱软件Guitar Pro 8 .1.1for Mac 中文破解版

Guitar Pro 8 .1.1for Mac 中文破解版是一款功能强大的音乐曲谱软件&#xff0c;非常适合学习如何玩&#xff0c;改进技巧&#xff0c;重现喜爱的歌曲或陪伴自己。可以帮助我们进行吉他的学习、绘谱与创作&#xff0c;它包含了几乎所有的吉他现有指法及音色&#xff0c;在做弹拨…