在 javascript 中使用 fetch 请求 API 存在 CORS 策略错误

Question

我正在尝试在我的 javascript 代码中使用 fetch 调用一些 API。我正在我的机器上使用 ReactJs 进行开发，并在同一个网络中进行另一个开发，在另一台机器上使用 .net 开发 API。使用邮递员，我可以调用 API，但使用 fetch 没有。我尝试在其他服务器调用另一个API，结果成功。

我正在使用 fetch 并尝试使用 axios。我在堆栈溢出的其他问题中发现了这个 API：https://gturnquist-quoters.cfapps.io/api/random。 答案是尝试获取它们，我尝试但再次抛出相同的错误。

我获取 gturnquist API 的代码：

const myHeader = new Headers();
myHeader.append('Content-Type', 'application/json');
fetch('http://gturnquist-quoters.cfapps.io/api/random', {
  method: 'GET', headers: myHeader,
})
 .then((res) => {
   console.log(res);
   return {};
 })
 .then(res => console.log(res));

和我的代码来获取我需要的 API：

const myHeader = new Headers();

const token = 'mytoken';
myHeader.append('id-tenant', token);
myHeader.append('Content-Type', 'application/json');

const id = 'myid';
const url = 'myurl';

fetch(`http://10.1.1.35/${url}/${id}`, {
  method: 'GET',
  headers: myHeader,
}).then(res => res.json()).then(res => console.log(res));

当我尝试调用 API 时出现此错误

选项http://10.1.1.35/url/id 503（服务不可用）

从源“http://localhost:3000”获取“http://10.1.1.35/url/id”的访问权限已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：没有“Access-Control-Allow-Origin”标头出现在请求的资源上。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

Uncaught (in promise) TypeError: Failed to fetch

这是服务器端错误还是 javascript 错误？

在我的服务器中，API 的配置类似于Rajkumar Peter 的答案

编辑：My network error

解决我的错误时遇到的问题：
Fetch CORS error with instagram api
Enable CORS in fetch api
managing CORS with fetch API GET request
React fetch has error fetch was blocked by CORS policy
Response to preflight request doesn't pass access control check

Answer 1

从网络浏览器执行 API 调用时，它通常会执行称为“预检检查”的操作。这实际上是浏览器向您的 API 发送请求的地方（在您自己的 API 调用之前），以检查允许执行的操作以及是否值得发送实际请求。

为此，它使用 OPTIONS 方法（而不是 GET、POST 等）。

如果您的 API 端点尚未配置为接受 OPTIONS 请求，则来自浏览器的预检请求将失败 - 并且它将中止发送您的请求。

要解决您的问题，您需要将 API 配置为接受 OPTIONS 方法。您还应该检查允许哪些来源（连接到 API 的客户端的 IP 地址）。