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

Question

我想为我的简单快递服务器设置代理。我添加了cors政策，当我像这样调用api时，一切工作正常：fetch('http://localhost:3000/tasks')但是当我在gatsby.config.js中设置代理时，如下所示：proxy: {    prefix: '/',    url: 'http://localhost:3000'  },并致电：fetch('/tasks)我收到此错误：未处理的拒绝（SyntaxError）：JSON中位置0处的意外令牌<如何在gatsby.js中正确设置代理？

Answer 1

我认为您不能将root用作代理。在盖茨比开发，代理，像这样处理这个：

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

因此，如果prefix将设置为/，它将变为//*不起作用。即使/*gatsby的工作原理像一样，所有来自gatsby服务器的路由都将重定向到代理服务器，因为proxy的先例比其余路由要高，因此gatsby根本没有任何机会提供任何页面。

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

proxy: {

  prefix: '/api',

  url: 'http://localhost:3000'

},

然后，您可以使用它：

fetch(`/api/tasks`)

Answer 2

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

1. 您可能会收到带有内容类型标头的HTML响应，说它是JSON。通过检查浏览器devtools中的网络面板来验证是否是这种情况。

2. 确保该请求确实命中了您的快递服务器。如果1.为true，则很有可能没有到达Express服务器，HTML来自Gatsby的dev服务器。

3. 如果以上两点都正确，那么也许可以调试Gatsby源代码以找出为什么决定处理该请求而不是转发该请求。德里克·阮（Derek Nguyen）指出了地点。它也是一个快速服务器，因此对您来说应该没问题。