使用webpack-dev-server配置代理解决前端开发跨域问题

前端开发阶段，与后端API交互时，常遭遇跨域问题（CORS，Cross-Origin Resource Sharing）。

浏览器出于安全考量，实施同源策略，禁止不同源脚本读取操作。开发阶段，可通过配置webpack-dev-server代理功能绕过限制。

下文详述代理设置方法，并深入剖析其代码逻辑。

一、为什么需要代理

前端应用尝试通过Ajax请求访问不同源（协议、域名或端口不同）的API时，浏览器自动执行CORS检查。

若未获后端许可，请求将被浏览器直接拒绝。因此，需一种方式模拟同源请求，即代理的作用——在前端与后端间建立桥梁，使前端“认为”同源，从而绕过浏览器CORS限制。

二、配置代理步骤

安装和启动webpack-dev-server

首先，确保已安装webpack和webpack-dev-server。

若尚未安装，可通过npm执行安装命令：

npm install webpack webpack-dev-server --save-dev

配置置webpack.config.js

在webpack.config.js文件中，需添加devServer配置项，特别是proxy对象以设定代理规则。

以下为一个简单示例：

const path = require('path');

module.exports = {
  // 其他webpack配置...
  devServer: {
    contentBase: path.join(__dirname, 'public'), // 告诉dev-server你的静态文件在哪里
    port: 3000, // 设置监听端口
    publicPath: '/', // 设置公共路径
    hot: true, // 启用热模块替换
    inline: true, // 实时刷新页面
    historyApiFallback: true, // 当使用HTML5路由时重定向到index.html
    proxy: { // 代理配置
      '/api': { // 代理的路径前缀
        target: 'http://localhost:808080', // 目标服务器地址
        changeOrigin: true, // 是否改变源
        pathRewrite: { '^/api': '' }, // 路写路径，去除前缀
      },
    },
  },
},
};

三、深入分析代码逻辑

• changeOrigin

changeOrigin: true指示webpack-dev-server在请求头中设置Origin字段为代理目标源，使后端可见请求来源并决定是否允许跨域请求。

默认情况下，Origin头部与实际源相同，但开启changeOrigin后，其被设置为目标服务器源，便于CORS策略匹配。

• pathRewrite

pathRewrite功能允许在转发请求至后端前修改URL。

上述示例中，所有以/api开头的请求均被代理至目标服务器，且前缀/api被移除。

如此，后端服务器接收到的请求路径直接对应其期望的API路径，无需额外处理前缀。

• target

target字段定义了请求被代理到的目标服务器地址。

这意味着所有符合代理规则的前端请求不会直接发送至前端服务器，而是由webpack-dev-server转发给指定的后端服务器。

总结

借助webpack-dev-server的代理功能，可有效解决开发环境中的跨域问题，使前后端分离开发更为顺畅。

理解代理配置逻辑不仅有助于更好地设置开发环境，也能在遇到问题时快速定位并解决。

请注意，生产环境中通常需由后端服务器配置CORS策略以正式允许跨域请求，而代理仅作为开发阶段的便捷手段。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持本站。