Webpack的Proxy工作原理❓为什么能解决跨域❓❓

jack_po
288 阅读3分钟

Webpack Proxy 工作原理及解决跨域问题

一、是啥

Webpack proxy 是 webpack 提供的代理服务，

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

其主要目的是为了便于开发者在开发模式下解决跨域问题（由浏览器安全策略限制）。

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

二、Webpack-dev-server

webpack-dev-server 是 webpack 官方推出的一款开发工具，集成了自动编译和自动刷新浏览器等一系列对开发友好的功能，旨在提高开发者日常的开发效率。

注意：只适用于开发阶段。

配置示例

// ./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'
            }
        }
        // ...
    }
}

代理配置属性说明

  • target：代理到的目标地址
  • pathRewrite：重写请求路径（如删除 /api 前缀）
  • secure：是否支持转发到 HTTPS 服务器（默认 false）
  • changeOrigin：是否更新代理后请求的 headers 中 host 地址

三、工作原理

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

示例

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 会启动一个本地开发服务器（如 http://localhost:3000 🖥️），而我们的后端服务通常运行在另一个地址（如 https://api.example.com 🌐）。由于浏览器的同源策略（Same-Origin Policy）🔒，直接从前端访问后端接口时就会出现跨域问题 🚫。

为了解决这个问题，webpack proxy 充当了一个中间代理的角色 🤖。当浏览器发送请求时，代理服务器会拦截这些请求（因为它们同源，都是 localhost:3000），然后悄悄把请求转发到真正的目标服务器（如 api.example.com）。目标服务器处理完请求后，把数据返回给代理服务器，代理服务器再返回给浏览器。

由于浏览器只和 localhost:3000 通信（同源 ✅），而服务器之间的通信不受同源策略限制 🚀，这样就巧妙地绕过了跨域限制，让前端开发调试变得更加顺畅！🎉

关键点：跨域是浏览器的安全策略，服务器之间直接通信没有这个限制！🔑

image.png

在开发阶段：

  1. webpack-dev-server 启动一个本地开发服务器（如 localhost:3000）
  2. 后端服务运行在另一个地址（如 api.example.com）
  3. 由于浏览器同源策略，直接访问会出现跨域问题

通过设置 webpack proxy：

  1. 浏览器向代理服务器发送请求（同源，无跨域）
  2. 代理服务器转发请求到目标服务器
  3. 目标服务器响应代理服务器
  4. 代理服务器将响应返回给浏览器

关键点：

  • 服务器与服务器之间请求数据不会存在跨域行为
  • 跨域行为是浏览器安全策略限制
  • 代理服务器充当中间人，使得浏览器只与同源服务器通信
avatar
文章
阅读
粉丝