CORS 'Access-Control-Allow-Origin' 标头不存在问题

Question

我正在使用 ReactJS 编写应用程序的客户端，我一直无法从某个 api 获取数据。我收到“请求的资源上不存在'Access-Control-Allow-Origin'标头。因此不允许访问来源'http://localhost:3000'”错误。 因为我认为服务器缺少“Access-Control-Allow-Origin”标头以启用 CORS，但我不明白为什么当我尝试使用“Restlet Client - REST API 测试”进行 AJAX 调用时" 浏览器扩展它确实有效。我得到以下成功响应。但它在我实际的 React 请求中不起作用。有没有办法在服务器端不做任何更改的情况下摆脱这个错误？为什么这个扩展真的有效？

Connection: keep-alive
Content-Type:   application/json; charset=UTF-8;
Date:   
2017 Sep 22 22:45:40-1m 50s
Server: ..../1.6.2
Transfer-Encoding:  chunked
Accept: */*
Accept-Encoding:    gzip, deflate, br
Accept-Language:    ru-RU,ru;q=0.8,en-US;q=0.6,en;q=0.4
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 
(KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36

我的 React 代码，但没有什么特别之处，只是测试我是否收到响应

componentWillMount() {
    const url = "https://myserver.ru/api/issue?perPage=10";
    Request.get(url).then((response) => {
      this.setState({
      issues: response
     });
    });   
  }

Answer 1

如果您正在发出跨站点请求，则浏览器将期望来自服务器的 Access-Control-Allow-Origin 标头。该标头的值可以是，

Access-Control-Allow-Origin: *

或

Access-Control-Allow-Origin: http://localhost:3000

当您从 localhost 请求时，请确保它还需要添加端口号。

有关 CORS 文档的更多信息：

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

希望对你有帮助。