尝试从REST API获取数据时，请求的资源上不存在“Access-Control-Allow

Question

尝试从REST API获取数据时，请求的资源上不存在“Access-Control-Allow

我正在尝试从HP Alm的REST API中获取一些数据。它适用于小卷曲脚本 - 我得到了我的数据。

现在使用JavaScript，fetch和ES6（或多或少）似乎是一个更大的问题。我一直收到此错误消息：

无法加载Fetch API。对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许来源“ http://127.0.0.1:3000 ”访问。响应具有HTTP状态代码501.如果不透明响应满足您的需要，请将请求的模式设置为“no-cors”以获取禁用CORS的资源。

我知道这是因为我试图从我的localhost中获取该数据，解决方案应该使用CORS。现在我以为我确实这样做了，但不管怎么说它要么忽略我在标题中写的内容，要么问题是别的什么？

那么，是否存在实施问题？我做错了吗？遗憾的是我无法检查服务器日志。我真的有点卡在这里。

function performSignIn() {

  let headers = new Headers();

  headers.append('Content-Type', 'application/json');
  headers.append('Accept', 'application/json');

  headers.append('Access-Control-Allow-Origin', 'http://localhost:3000');
  headers.append('Access-Control-Allow-Credentials', 'true');

  headers.append('GET', 'POST', 'OPTIONS');

  headers.append('Authorization', 'Basic ' + base64.encode(username + ":" + password));

  fetch(sign_in, {
      //mode: 'no-cors',
      credentials: 'include',
      method: 'POST',
      headers: headers    })
    .then(response => response.json())
    .then(json => console.log(json))
    .catch(error => console.log('Authorization failed : ' + error.message));}

我正在使用Chrome。我也尝试使用Chrome CORS插件，但后来我收到另一条错误消息：

当请求的凭据模式为“include”时，响应中“Access-Control-Allow-Origin”标头的值不能是通配符“*”。因此，不允许来源“ http://127.0.0.1:3000 ”访问。XMLHttpRequest发起的请求的凭据模式由withCredentials属性控制。

Answer 1

出现问题的原因是您在前端添加了以下代码作为请求标头：headers.append('Access-Control-Allow-Origin', 'http://localhost:3000');headers.append('Access-Control-Allow-Credentials', 'true');那些标题属于响应，而不是请求。所以删除它们，包括行：headers.append('GET', 'POST', 'OPTIONS');您的请求有'Content-Type：application / json'，因此触发了所谓的CORS预检。这导致浏览器使用OPTIONS方法发送请求。有关详细信息，请参阅CORS预检。因此，在后端，您必须通过返回响应标头来处理此预检请求，其中包括：Access-Control-Allow-Origin : http://localhost:3000Access-Control-Allow-Credentials : trueAccess-Control-Allow-Methods :  GET, POST, OPTIONSAccess-Control-Allow-Headers : Origin, Content-Type, Accept当然，实际语法取决于您用于后端的编程语言。在你的前端，它应该是这样的：function performSignIn() {     let headers = new Headers();     headers.append('Content-Type', 'application/json');     headers.append('Accept', 'application/json');     headers.append('Authorization', 'Basic ' + base64.encode(username + ":" +  password));     headers.append('Origin','http://localhost:3000');     fetch(sign_in, {         mode: 'cors',         credentials: 'include',         method: 'POST',         headers: headers    })     .then(response => response.json())     .then(json => console.log(json))     .catch(error => console.log('Authorization failed : ' + error.message));}

Answer 2

删除这个：credentials: 'include',