尝试从REST API获取数据时，请求的资源上没有“ Access-Control-Allow-Origin”标头

本文翻译自：No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API

I'm trying to fetch some data from the REST API of HP Alm. 我正在尝试从HP Alm的REST API中获取一些数据。 It works pretty well with a small curl script - I get my data. 它与一个小的curl脚本一起使用时效果很好-我得到了数据。

Now doing that with JavaScript, fetch and ES6 (more or less) seems to be a bigger issue. 现在使用JavaScript进行操作，获取和ES6（或多或少）似乎是一个更大的问题。 I keep getting this error message: 我不断收到此错误消息：

Fetch API cannot load . 提取API无法加载。 Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. 对预检请求的响应未通过访问控制检查：请求的资源上不存在“ Access-Control-Allow-Origin”标头。 Origin ' http://127.0.0.1:3000 ' is therefore not allowed access. 因此，不允许访问源' http://127.0.0.1:3000 '。 The response had HTTP status code 501. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. 响应的HTTP状态码为501。如果不透明响应满足您的需求，请将请求的模式设置为“ no-cors”，以在禁用CORS的情况下获取资源。

I understand that this is because I am trying to fetch that data from within my localhost and the solution should be using CORS. 我了解这是因为我正在尝试从本地主机中获取数据，并且解决方案应使用CORS。 Now I thought I actually did that, but somehow it either ignores what I write in the header or the problem is something else? 现在我以为我确实这样做了，但是以某种方式它要么忽略了我在标题中写的内容，要么是其他问题？

So, is there an implementation issue? 那么，是否存在实施问题？ Am I doing it wrong? 我做错了吗？ I can't check the server logs unfortunately. 我无法检查服务器日志。 I'm really a bit stuck here. 我真的有点卡在这里。

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));
}

I am using Chrome. 我正在使用Chrome。 I also tried using that Chrome CORS Plugin, but then I am getting another error message: 我也尝试使用该Chrome CORS插件，但是随后出现另一条错误消息：

The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. 当请求的凭据模式为“ include”时，响应中“ Access-Control-Allow-Origin”标头的值不得为通配符“ *”。 Origin ' http://127.0.0.1:3000 ' is therefore not allowed access. 因此，不允许访问源' http://127.0.0.1:3000 '。 The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute. XMLHttpRequest发起的请求的凭据模式由withCredentials属性控制。

---

#1楼

参考：https://stackoom.com/question/2y513/尝试从REST-API获取数据时-请求的资源上没有-Access-Control-Allow-Origin-标头

---

#2楼

This answer covers a lot of ground, so it's divided into three parts: 该答案涉及很多领域，因此分为三个部分：

• How to use a CORS proxy to get around “No Access-Control-Allow-Origin header” problems 如何使用CORS代理来解决“无访问控制-允许-来源标头”问题
• How to avoid the CORS preflight 如何避免CORS飞行前
• How to fix “Access-Control-Allow-Origin header must not be the wildcard” problems 如何解决“ Access-Control-Allow-Origin标头一定不能为通配符”的问题

---

How to use a CORS proxy to get around “No Access-Control-Allow-Origi