如何在 Docusaurus v2 中代理请求？答案

【问题标题】：How to proxy request in Docusaurus v2?如何在 Docusaurus v2 中代理请求？
【发布时间】：2022-01-06 02:17:40
【问题描述】：

我正在尝试配置我的 Docusaurus Web 应用程序以将请求代理到我的 api 端点。例如，如果我在我的应用程序fetch(/api/test) 中发出提取请求，它会将来自localhost:3000/api/test 的请求代理到我的{{api_endpoint}}/api/test，但我仍在努力做到这一点。

我做了什么：

在 package.json 中添加代理字段
在 src 文件夹中创建 setupProxy.js

这2个是基于Proxying API Requests in Development

另一种方法是我创建了一个自定义 webpack 插件并将其添加到 Docusaurus 配置中

有人有这个问题的经验吗？感谢您的阅读，非常感谢您的帮助。

【问题讨论】：

标签： reactjs proxy http-proxy docusaurus

【解决方案1】：

我走的是完全相同的道路。最终 Docusaurus 在后台运行它的 Webpack 开发服务器，这就是代理字段和 setupProxy.js 没有按预期工作的原因。我能够通过代理获取外部 API 调用，并通过创建像您正在尝试的 Docusaurs 插件来解决 CORS 错误。添加“mergeStrategy”和“changeOrigin”是让这一切正常工作的关键。

// plugins/webpack/index.js
module.exports = function (context, options) {
  return {
    name: "cusotm-webpack-plugin",
    configureWebpack(config, isServer, utils) {
      return {
        mergeStrategy: { "devServer.proxy": "replace" },
        devServer: {
          proxy: {
            "/YOUR_COOL_ROUTE": {
              target: "https://YOUR_COOL_API/",
              secure: false,
              changeOrigin: true,
              logLevel: "debug",
            },
          },
        },
      };
    },
  };
};

【讨论】：