是否可以将 html get 请求从 create-react-app 代理到 /graphql？

Question

我有一个 create-react-app 应用程序，我通过添加以下内容启用了代理：

"proxy": "http://localhost:3001",

到我的 package.json。这适用于对 /graphql 的 API 请求，但是当 Web 浏览器请求 /graphql（用于加载 UI 以运行查询）由前端处理而不是代理时。是否也可以代理它？

当我尝试通过访问https://localhost:3000/auth/facebook进行 OAuth 时，会发生同样的事情，前端处理它而不是后端。

Answer 1

确实可以进一步自定义代理。

首先，当 Web 浏览器请求/graphqlor 时/auth/facebook，它会发送一个Accept包含text/html（等等）的标头。CRA 代理的配置专门忽略具有此标头值的请求：

开发服务器只会尝试将其 Accept 标头中没有 text/html 的请求发送到代理。

（强调原文）

幸运的是，您可以覆盖默认配置并根据您的喜好基本上挂钩代理中间件。文档中有详细说明，在npm 包 docs 中有更多说明，但关键是：

  app.use(
    '/graphql',
    createProxyMiddleware({
      target: 'http://localhost:3001',
      changeOrigin: true,
    })
  );