在 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 策略阻止：对预检请求的响应未通过访问控制检查：否-Control-Allow-Origin' 标头存在于请求的资源上。如果不透明响应满足您的需求，请将请求的模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。

Uncaught (in promise) TypeError: Failed to fetch

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

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

编辑：我的网络错误

我已经看到尝试处理我的错误的问题：
使用 instagram api 获取 CORS 错误
在 fetch api 中启用 CORS
管理 CORS 使用 fetch API GET 请求
React fetch has error fetch is Blocked by CORS policy
对预检请求的响应未通过访问控制检查

Answer 1

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

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

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

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