在 Netlify Create-react-app 中提供服务后，使用代理无法解决 Cors 问题答案

【问题标题】：Cors issue solved by using proxy not working after served in Netlify Create-react-app在 Netlify Create-react-app 中提供服务后，使用代理无法解决 Cors 问题
【发布时间】：2020-09-13 15:55:48
【问题描述】：

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

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

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

【问题讨论】：

标签： api deployment cors create-react-app netlify

【解决方案1】：

我也遇到了同样的问题，所以我从“package.json”文件中删除了“proxy”，并创建了一个变量来存储 IP 地址或 URL对于 backend ，然后将其与 URL 参数一起用于调用 API。通过允许“所有来源”在后端解决了 CORS 问题。

用于存储基本 URL 的文件：

常量.js：

export const baseUrl = "https://backEndUrl";

调用 API 的文件：

getDataApi.js：

import { baseUrl } from "./constant";

export const getProfileData = () => (dispatch) => {
  axios
    .get(`${baseUrl }/api/profile`)
    .then((res) =>
      dispatch({
        type: GET_PROFILE,
        payload: res.data,
      })
    )
    .catch((err) =>
      dispatch({
        type: GET_PROFILE,
        payload: null,
      })
    );
};

【讨论】：

【解决方案2】：

我也遇到了同样的问题，并通过在根目录中创建 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 = "*"}

【讨论】：

【解决方案3】：

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

如果你使用这样的表达方式：

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 = "*"

【讨论】：

我没有使用服务器。只需使用创建反应应用程序。并反应路由器。
我遇到了同样的问题。它可以在本地找到，但是当我上传到 netlify 时... CORS 会阻止 api 调用。

【解决方案4】：

你试过netifydocumentation吗？

代理到另一个服务就像您可以将 /* 之类的路径重写为 /index.html，你也可以设置规则让你的部分站点代理到外部服务。假设您需要从带有https://api.example.com 上的 API 的单页应用程序支持 CORS 请求。以下规则将允许您使用 /api/ from 你的 JavaScript 客户端：
/api/*  https://api.example.com/:splat  200
现在所有对 /api/... 的请求都将被代理到 https://api.example.com 直接来自我们的 CDN 服务器，没有来自浏览器的附加连接。如果 API 支持标准 HTTP 缓存机制，如 ETag 或 Last-Modified 标头，响应甚至会被我们的 CDN 节点缓存。

【讨论】：