在javascript中使用提取请求API有CORS政策错误

Question

我正在尝试在我的JavaScript代码中调用某些具有访存功能的API。我正在使用我的机器上的ReactJs进行开发，并且在同一网络中进行另一项开发，在另一台机器上使用.net开发API。使用邮递员，我可以调用API，但不能获取。我尝试在其他服务器上调用另一个API，结果成功。

我正在使用访存，也尝试使用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的情况下获取资源。

未捕获（按承诺）TypeError：无法获取

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

编辑 ：我的网络错误

我所看到的问题可以尝试解决我的错误： 使用instagram api提取CORS错误
在fetch api启用CORS 用fetch API GET请求管理CORS反应fetch有错误，CORS策略阻止了fetch
对预检请求的响应未通过访问控制检查

Answer 1

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

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

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

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