调试在 package.json 中使用代理的 API 调用答案

【问题标题】：Debugging API calls that use a proxy in package.json调试在 package.json 中使用代理的 API 调用
【发布时间】：2019-09-17 09:33:53
【问题描述】：

如果我在我的package.json 中使用代理，例如，如下所示：

"proxy": "https://my-api-url.com"

如果我想查看fetch API 实际获取的 URL，我该怎么做？我不确定这个问题是否有意义，但我正在尽力而为——在 Chrome 的网络选项卡中，我可以看到请求 url 是http://localhost:3000/some/endpoint，但我怎么知道代理是否工作正常？

如果这个问题没有意义或不清楚，我们深表歉意。

【问题讨论】：

标签： proxy create-react-app package.json

【解决方案1】：

我最终使用了以下 Webpack 配置，以防万一它对其他人有所帮助：

    proxy: {
        "/api": {
            "target": "https://link-to-your-api",
            "secure": false,
            "pathRewrite": {
                "^/api": ""
            },
            "changeOrigin": true,
            "logLevel": "debug"
        }
    }
},

通过该配置，我能够使用 Fetch API 发出请求，如下所示：

  const response = await fetch('/api/path1/path2/endpoint/', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Cache-Control': 'no-cache'
    },
    body: JSON.stringify(yourRequestBody)
  });

【讨论】：