尝试从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',