通过在Netlify Create-react-app中使用服务后不工作的代理解决了Cors问题

Question

我已经建立了一个房地产网站，它在开发模式下向"https://completecriminalchecks.com“发出api请求，我得到了可怕的被Cors阻塞的错误。通过一些研究，我发现我需要使用代理来解决这个问题，它在我的本地主机上的开发模式下做到了这一点。但现在我已经将站点部署到netlify，当我发出请求时，我得到了一个404错误。当我查看来自网络的请求时，devtools说

请求地址：https://master--jessehaven.netlify.app/api/json/?apikey=6s4xxxxx13xlvtphrnuge19&search=radius&miles=2¢er=98144

我不认为这是对的。如何让netlify向开发中出现cors问题的api发出正确的请求？

Answer 1

你有没有试过把这件事告诉documentation？

代理到另一个服务，就像你可以重写/*到/index.html的路径一样，你也可以设置规则，让你的站点的一部分代理到外部服务。假设您需要从单页面应用程序与不支持CORS请求的https://api.example.com上的应用程序接口进行通信。以下规则将允许您从JavaScript客户端使用/api/：

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

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

Answer 2

您不需要使用代理，只需在您的服务器中启用CORRS即可。您是否在使用onde服务器？

如果你使用express这样的东西：

npm install --save cors

然后将其用作中间件：

var express = require('express');
var cors = require('cors');
var app = express();
app.use(cors());

在您的netlify.toml文件中也可以这样做：

# The following redirect is intended for use with most SPAs that handle
# routing internally.
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

[[headers]]
  # Define which paths this specific [[headers]] block will cover.
  for = "/*"
    [headers.values]
    Access-Control-Allow-Origin = "*"

Answer 3

我也遇到了同样的问题，并通过在根目录中创建一个netlify.toml文件来解决。这是一个重定向的示例代码，它适用于我。

将此代码放入netlify.toml文件中。

Documentation guide for proxy :

 [[redirects]]
  from = "/api/users/tickets/"
  to = "https://some-external-site.com/api/users/tickets/"
  status = 200
  force = true
  headers = {Access-Control-Allow-Origin = "*"}

[[redirects]]
  from = "/api/users/cars/*"
  to = "https://some-external-site.com/api/users/cars/:splat"
  status = 200
  force = true
  headers = {Access-Control-Allow-Origin = "*"}