如何代理 API REST 调用：（FE 托管在 Netlify 上）？

Question

当我要发布一个呼叫时，它在本地工作正常，我可以使用 netlify 进行访问，但是一旦我从 Netlify 托管前端应用程序，POST 代理就会设置为 netlify URL

托管网址：https://deploy-preview-14--hungry-lovelace-df4f46.netlify.app/login

我们点击 Sign Up 然后点击 Signup 然后我看到 POST 方法将要 https://abc/注册

我需要它去https://xyztrial.com/register

在本地，我通过在 Package.json 中添加 Proxy: 'xyztrial.com.com' 使其工作

但是一旦我托管了它，我就无法发布呼叫，我该怎么办？

已添加相同的屏幕截图以及可以在线完成的上述 URL。

因此我收到 404 错误页面未找到

Answer 1

你有两个选择：

1. 您使用 NODE_ENV 环境变量将基本 URL 从 dev 切换到 prod，并在您的 api 调用中使用它：

   const baseURL = process.env.NODE_ENV === "development" ? "localhost:5000" : "https://nameofyourapp.herokuapp.com" 
   
   const endpoint = "/api/v1/get-posts"
   
   fetch(baseURL + endpoint)
   ... 
   ...
   

   这样你就不需要在开发期间在 package.json 中进行代理，它会在生产中自动切换到你的后端 URL。

   2. 使用 Netlify 代理：

   代理到另一个服务 与将 /* 等路径重写为 /index.html 的方式类似，您还可以设置规则让网站的某些部分代理外部服务。假设您需要通过 https://api.example.com 上不支持 CORS 请求的 API 从单页应用程序进行通信。以下规则将允许您从 JavaScript 客户端使用 /api/：

   /api/* https://api.example.com/:splat 200

   现在所有对 /api/... 的请求都将被代理到 https://api.example.com 直接来自我们的 CDN 服务器，无需 来自浏览器的额外连接。如果 API 支持标准 HTTP 缓存机制，如 ETags 或 Last-Modified 标头， 响应甚至会被我们的 CDN 节点缓存。

   https://docs.netlify.com/routing/redirects/rewrites-proxies/#proxy-to-another-service

   请记住启用 CORS 并将您的 netlify 源放置在您的 heroku 服务器上允许的位置。

Answer 2

解决方案非常简单直接：-

您需要在前端的根目录中添加名称为“_redirects”的文件（通常反应的根目录是公共的）

您需要在该目录中有 2 行代码：-

1. 如果您对后端进行 api 调用的 url 类似于：- api/user/signin 并假设您的后端部署在https://backend-url.com，那么您的 _redirects 文件中的第一行将是：-

   /api/* https://backend-url.com/api/:splat 200

2. 在您的 netlify 部署的应用程序中，如果 tou 将刷新任何路由，则会发生“404 页面未找到”错误。假设 index.html 是您前端的根文件，在 _redirects 中添加这一行：-

   /* /index.html 200