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

Question

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

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

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

Answer 1

你试过关于它的网络化文档吗？

代理到另一个服务 就像您可以将/* 等路径重写为/index.html，您还可以设置规则以允许部分站点代理 到外部服务。假设您需要从 单页应用，https://api.example.com 上没有 API 支持 CORS 请求。以下规则将允许您使用/api/from 您的 JavaScript 客户端：

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

现在所有对/api/...将被代理到 直接从我们的 CDN 服务器 https://api.example.com，无需 来自浏览器的其他连接。如果 API 支持标准 HTTP 缓存机制，如 ETag 或上次修改标头， 响应甚至会被我们的 CDN 节点缓存。

Answer 2

您不需要使用代理，您可以在服务器中启用 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 = "*"

Answer 3

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

把它放在netlify.toml文件中。

代理文档指南：

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

Answer 4

我也遇到了同样的问题，所以我从">package.json"文件中删除了">代理"，并创建了一个变量来存储后端的IP地址或URL，然后将其与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,
})
);
};