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

devtools/2024/11/15 8:34:00/

webpack-dev-server 提供了一个 proxy 功能,可以帮助开发者在本地开发时解决跨域问题。要理解其工作原理以及为什么可以解决跨域问题,首先我们需要了解两个关键概念:跨域问题代理的工作方式

1. 跨域问题的本质

跨域问题是浏览器的同源策略(Same-Origin Policy)引起的。浏览器会限制从一个源(协议、域名、端口)发起的请求访问另一个源的资源。具体来说,以下任意一项不同都被认为是跨域:

  • 协议(如 http://https://
  • 域名(如 example.comapi.example.com
  • 端口(如 http://localhost:3000http://localhost:8000

前端开发中,通常会遇到这种情况:前端应用运行在 http://localhost:8080,而后端 API 服务器运行在 http://localhost:3000。由于端口不同,它们被认为是不同的源,直接请求后端 API 会触发跨域问题。

webpack_proxy__12">2. webpack proxy 的工作原理

webpack-dev-server 提供的 proxy 功能通过代理服务器的形式绕过了浏览器的同源策略。其工作原理可以简单描述为:

  1. 请求拦截:当浏览器向开发服务器(如 http://localhost:8080)发送请求时,webpack-dev-server 会检查该请求的路径是否符合代理规则。

  2. 请求转发:如果符合代理规则,webpack-dev-server 会将该请求转发(代理)到目标服务器(如 http://localhost:3000)。从浏览器的角度来看,它的所有请求都还是发往 http://localhost:8080,所以不会触发跨域问题。

  3. 响应回传:目标服务器(如后端 API)接收到请求后,处理并返回响应。webpack-dev-server 代理服务器收到响应后,将其再转发给浏览器。整个过程对浏览器是透明的,浏览器并不知道请求实际上是由代理服务器转发的。

通过这种方式,浏览器只与 webpack-dev-server 通信,而不是直接与后端服务器通信,因此避免了跨域限制。

3. 为什么能解决跨域问题

通过代理的方式,webpack-dev-server 使浏览器始终认为它是在与同源的服务器(即 localhost:8080)进行通信,而实际的请求是在服务器端完成的跨域。因为跨域请求发生在服务器端,而不是浏览器端,服务器之间的通信没有同源策略的限制,所以可以正常请求不同源的资源。

4. 配置示例

一个典型的 proxy 配置如下:

module.exports = {devServer: {proxy: {'/api': {target: 'http://localhost:3000',changeOrigin: true,pathRewrite: { '^/api': '' },},},},
};
  • /api:匹配所有以 /api 开头的请求路径。
  • target:指向目标服务器地址(如 http://localhost:3000)。
  • changeOrigin:设置为 true 后,代理服务器会修改请求头中的 Host 字段,使其与目标服务器一致。
  • pathRewrite:重写路径规则,这里将 /api 去掉,使得请求路径与目标服务器匹配。

5. 总结

webpack-dev-serverproxy 通过在开发服务器上代理请求,将前端发向开发服务器的请求转发给后端实际的 API 服务器,从而避免了浏览器的同源策略限制,解决了跨域问题。代理的本质是浏览器只与同源的服务器通信,而跨域请求则由服务器进行,绕过了浏览器的跨域安全限制。


http://www.ppmy.cn/devtools/133750.html

相关文章

C++并发编程中怎样避免死锁

在C并发编程中,死锁是一个常见的问题,特别是在使用多线程和锁机制时。死锁发生在两个或多个线程互相等待对方释放资源时,导致所有线程都无法继续执行。为了避免死锁,开发人员可以采用一些常用的方法和准则。以下是一些有效的方法和…

[C++]学习《DirectX12 3D 游戏开发实战》 第八天 利用 Direct3D 绘制几何体(续)

本章将介绍一些此书后面常会用到的绘图模式。首先讲解与绘图优化相关的内容,此处涉及“帧资源 (frame resource)”等概念。若采用帧资源,我们就得修改程序中的渲染循环,好处:不必在每一帧都刷新命令队列,继而改善 CPU …

七招提升工作效率

本文介绍了可以有效提升开发者工作效率的七个技巧。原文: 7 Productivity Hacks I Stole From a Principal Software Engineer Domenico Loia Unsplash 你有没有过与工作风格近乎神奇的高级或首席软件工程师共同工作的经验? 想象一下,有个人只需轻轻一点…

命令行工具进阶指南

🚀 命令行工具进阶指南:Git、Shell与效率工具的进阶之路 掌握命令行工具,让你的开发效率突飞猛进。本文将深入探讨 Git 高级技巧、Shell 脚本自动化以及各种效率倍增的 CLI 工具。 📑 目录 Git 高级技巧与工作流Shell 脚本自动化…

SpringBoot(十一)SpringBoot上传文件

今天我们需要做一个文件上传,为我们后边要做的webscoket即时聊天做准备。 一:在配置文件中配置文件上传参数 spring:profiles:# 对,你没看错,环境对应的名称就是子环境-后边的名字,我这里分别对应 dev|productactive:…

容器docker的ulimit

Ulimit 在linux里ulimit命令可以对shell生成的进程的资源进行限制。 常用的ulimit限制 打开文件句柄数core文件大小设置进程能够消耗的虚拟内存设置用户能够打开的进程数目 不太常用的ulimit限制 设置数据段的最大值.单位:kbytes 设置创建文件的最大值.单位:blocks 设置在…

thinkphp自定义命令行+宝塔面板Shell脚本实现定时任务

参考 ThinkPHP宝塔运营环境实现定时任务_宝塔linux面板 thinkphp 定时任务怎么配置-CSDN博客 thinkphp自定义命令行宝塔Shell脚本实现定时任务_宝塔定时执行shell脚本命令-CSDN博客 未实操,如果实操结合上面两个案例

【计算机网络】UDP网络程序

一、服务端 1.udpServer.hpp 此文件负责实现一个udp服务器 #pragma once#include <iostream> #include <string> #include <cstdlib> #include <cstring> #include <functional> #include <strings.h> #include <unistd.h> #incl…