Gatsby.js - 表达服务器的代理

Question

我想为我的简单快递服务器设置代理。我添加了 cors 策略，当我像这样调用 api 时一切正常：

fetch('http://localhost:3000/tasks')

但是当我像这样在 gatsby.config.js 中设置代理时：

proxy: {
    prefix: '/',
    url: 'http://localhost:3000'
  },

然后调用：

fetch('/tasks)

我收到此错误：

未处理的拒绝 (SyntaxError): 意外的标记

如何在 gatsby.js 中正确设置代理？？

Answer 1

我认为您不能使用 root 作为代理。在 gatsby develop 中，代理的处理方式类似于 this:

app.use(`${prefix}/*`, (req, res) => { ... }

因此，如果 prefix 设置为 /，它将变为 //*，这将不起作用。即使它确实像/* 那样工作，所有来自 gatsby 服务器的路由都将被重定向到代理服务器，因为代理比其他路由具有更高的先例，gatsby 根本没有任何机会服务任何页面。

prefix 必须是以斜线开头的单词，即/api：

proxy: {
  prefix: '/api',
  url: 'http://localhost:3000'
},

然后就可以使用了：

fetch(`/api/tasks`)

Answer 2

这应该进入评论，但格式不好，所以我发布作为答案。我不确定确切的原因是什么，但有一些想法可以帮助您调试。

1. 您可能会收到带有内容类型标头的 HTML 响应，表明它是 JSON。通过检查浏览器 devtools 中的网络面板来验证是否是这种情况。
2. 确保请求确实到达了您的快速服务器。如果 1. 为真，那么很有可能它没有到达 express 服务器，HTML 来自 Gatsby 的开发服务器。
3. 如果以上两点都成立，那么也许调试 Gatsby 源代码以找出它决定处理请求而不是转发请求的原因。 Derek Nguyen 指出了location。它也是一个快速服务器，所以对你来说应该没问题。