基于 webpack-dev-server 调试 SPA 应用时使用 proxy 解决跨域问题-JavaScript中文网-JavaScript教程资源分享门户

在开发前端单页应用的过程中，经常会遇到调试时需要与后端接口交互的情况。然而，由于浏览器的同源策略，前端应用只能与同源的接口进行交互，不能与其他域名的接口通信。这就导致了前端开发时需要与后端部署在不同服务器的情况下，往往会遇到跨域问题。

为了解决这个问题，webpack-dev-server 提供了 proxy 配置项，可以将需要访问的接口代理到同源下，从而实现跨域访问后端接口。

本文将介绍使用 webpack-dev-server 的 proxy 配置项来解决跨域问题的方法，并提供示例代码。

什么是 webpack-dev-server?

webpack-dev-server 是一个基于 Node.js 的开发服务器，可以在本地快速开发和调试前端应用，支持热部署和自动刷新。

webpack-dev-server 同时也提供了一些辅助开发的特性，例如实时重载、热替换、source map 等等，这些特性可以大大提高开发效率。

使用 proxy 配置项解决跨域问题

proxy 是 webpack-dev-server 的一个配置项，用于将需要访问的接口代理到同源下，从而实现跨域访问后端接口。

proxy 的配置方式有两种，一种是使用简单的字符串格式，另一种是使用复杂的对象格式。下面我们将逐步介绍这两种格式的用法。

1. 简单的字符串格式

proxy 的简单字符串格式是最常用的格式。它的格式如下：

"api": {
  "target": "http://localhost:3000",
  "changeOrigin": true,
  "pathRewrite": {
    "^/api": ""
  }
}

这个配置的含义是，将所有以 /api 开头的请求转发到 http://localhost:3000 上，并将接口返回的数据中 /api 的前缀去掉。例如，当我们在前端代码里请求 /api/users 时，实际会被转发到 http://localhost:3000/users 上。

其中，target 是要代理的目标地址，changeOrigin 用于控制是否改变请求的 origin，pathRewrite 则用于将接口返回的数据中的 URL 路径中的前缀进行替换。

2. 复杂的对象格式

除了简单的字符串格式，proxy 还提供了更为复杂的对象格式。这个格式可以实现更为灵活的配置，包括筛选需要代理的请求、修改请求头等操作。

下面是一个示例配置：

// www.javascriptcn.com code example
proxy: {
  "/api": {
    target: "http://localhost:3000",
    pathRewrite: {"^/api" : ""},
    changeOrigin: true,
    secure: false,
    logLevel: "debug",
    cookieDomainRewrite: "",
    onProxyRes: function(proxyRes, req, res) {
      var key = "set-cookie";
      proxyRes.headers[key] = proxyRes.headers[key]
        .map(function(cookie) {
          return cookie.replace(/(domain=)([^;]+)/, "$1localhost");
        });
    }
  }
}

这个配置的含义是，将所有以 /api 开头的请求转发到 http://localhost:3000 上，并将接口返回的数据中 /api 的前缀去掉。同时，它还指定了一些附加的配置，例如：

secure: 是否验证 SSL 证书
logLevel: 代理日志等级
cookieDomainRewrite: cookie 域名重写
onProxyRes: 重写响应头

示例代码

我们可以使用以下代码演示如何使用 proxy 配置项解决跨域问题。这个示例中，我们将 /api/user 路径下的请求代理到 http://localhost:3000/users 上。

1. 安装 webpack-dev-server

首先，我们需要在本地安装 webpack-dev-server：

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

2. 编写 webpack 配置文件

然后，在项目根目录下创建 webpack.config.js，内容如下：

// www.javascriptcn.com code example
const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  devServer: {
    hot: true,
    open: true,
    historyApiFallback: true,
    proxy: {
      '/api/user': {
        target: 'http://localhost:3000/users',
        changeOrigin: true,
        pathRewrite: { '^/api': '' },
      },
    },
  }
};

在这个配置文件中，我们使用了 proxy 配置项，将 /api/user 路径下的请求代理到 http://localhost:3000/users 上。同时，我们也开启了一些额外的配置，例如：

hot: 是否启用热更新
open: 是否自动打开浏览器
historyApiFallback: 是否启用单页应用路由的历史记录

3. 编写前端代码

接着，我们在 src/index.js 中编写前端代码，通过 fetch 进行接口请求：

fetch('/api/user')
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

这个代码会向 http://localhost:8080/api/user 发送请求，并将返回的数据打印到控制台中。

4. 启动服务器

最后，在终端中执行以下命令启动服务器：

npx webpack-dev-server

然后，打开浏览器并访问 http://localhost:8080，我们就可以看到从 http://localhost:3000/users 获取到的数据了。

小结

本文介绍了基于 webpack-dev-server 使用 proxy 配置项来解决跨域问题的方法。我们可以使用 proxy 配置项将需要访问的接口代理到同源下，从而实现跨域访问后端接口。同时，我们还提供了示例代码，帮助大家更好地理解这个过程。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67bbd355306f20b3a6b97719

基于 webpack-dev-server 调试 SPA 应用时使用 proxy 解决跨域问题