GatsbyJS/ReactJS 没有正确代理请求

Posted 2023-03-07

【中文标题】GatsbyJS/ReactJS 没有正确代理请求

【英文标题】：GatsbyJS/ReactJS not proxying requests correctly

【发布时间】：2019-08-29 01:44:02

【问题描述】：

这里有一些上下文。我有一个用 Gatsby 构建的 ReactJS 站点。该站点完全是静态的，没有后端。我最近一直在研究后端集成，因为我想用 GitHub API 做一些数据可视化的东西。无论如何，我正在使用 NodeJS 构建自己的后端 API，然后代理前端请求（使用 fetch API）。

在开发过程中，前端位于 localhost:8000，后端位于 localhost:5000。这是我的gatsby-config.js 文件。它还有一些与这个问题无关的其他位，但代理位就在底部：

module.exports = 
  siteMetadata: 
    title: "Reece Mercer",
    description: "Personal website"
  ,
  plugins: [
    'gatsby-plugin-react-helmet',
    
      resolve: `gatsby-plugin-manifest`,
      options: 
        name: 'gatsby-starter-default',
        short_name: 'Reece Mercer',
        start_url: '/',
        background_color: '#663399',
        theme_color: '#663399',
        display: 'minimal-ui',
        icon: 'src/assets/images/website-icon.png', // This path is relative to the root of the site.
      ,
    ,
    'gatsby-plugin-sass',
    'gatsby-plugin-offline',
    'gatsby-plugin-favicon',
    
        resolve: 'gatsby-source-filesystem',
        options: 
            path: `$__dirname/src/blog_posts`,
            name: 'blog_posts'
        
    ,
    'gatsby-transformer-remark'
  ],
  proxy: 
    prefix: "/myRepoAPI",
    url: "http://localhost:5000",
  ,

基本上，从前端发出的任何发往/myRepoAPI/anything 的请求都应该从前端代理到后端。我使用 Postman 来验证后端，并且该端点正常运行。

这是我在前端 React 组件中使用的 fetch 调用：

componentDidMount()
    fetch('/myRepoAPI/hello')
    .then(res => console.log(res))

现在分析控制台日志：

Response type: "basic", url: "http://localhost:8000/myRepoAPI/hello", redirected: false, status: 200, ok: true, …
body: (...)
bodyUsed: false
headers: Headers 
ok: true
redirected: false
status: 200
statusText: "OK"
type: "basic"
url: "http://localhost:8000/myRepoAPI/hello"
__proto__: Response

url 值位于 localhost:8000，而不是 5000。代理没有工作。我尝试了不同的路由组合，尾随/，甚至尝试了developMiddleware 的高级代理方法。似乎没有什么可以让它正常工作。

任何帮助将不胜感激！

【参考方案1】：

由于 Gatsby 的内部开发服务器（默认在端口 8000）处理代理，因此在响应对象中，url 值将始终为 http://localhost:8000/...，无论代理是否正常工作。

从本地服务器的 5000 端口查看日志时，您可能会有更多线索，看看来自 Gatsby 的请求是否真的达到了那个目的；或注销您从请求中获得的实际数据。

【讨论】：

我没想过这样测试它。对这些东西还是很陌生。谢谢！结果我需要做res => res.json() 和.then(res => console.log(res)) 才能记录实际的身体。因为我没有在原始日志中看到我的硬编码响应，所以我认为出了点问题，但我只是没有正确记录它。

哦，原来如此，很高兴你把它整理好了！