请求带有获取javascript的API时出现CORS策略错误

Question

我试图调用一些API在我的javascript代码中获取。我正在我的机器中使用ReactJs开发，并在同一网络中使用另一台机器中的. net开发API。有了邮递员，我可以调用应用编程接口，但是没有。我尝试调用其他服务器中的另一个API，结果是成功的。

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

我的代码来获取gtransquist 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://10.1.1.35/url/id“起源”http://localhost:3000'已被CORS策略阻止：对飞行前请求的响应未通过访问控制检查：请求的资源上不存在'access control Allow Origin'标头。如果不透明响应满足您的需要，请将请求的模式设置为“no cors”，以获取禁用cors的资源。

未捕获（promise中）TypeError:无法获取

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

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

编辑：我的网络错误

我在尝试处理错误时遇到的问题：
使用instagram api获取CORS错误
在获取api中启用CORS
使用获取api管理CORS获取请求
反应获取有错误获取被CORS策略阻止
对飞行前请求的响应未通过访问控制检查

Answer 1

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

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

如果您的APIendpoint尚未配置为接受选项请求，那么来自浏览器的飞行前请求将失败，并且它将中止发送您的请求。

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