Axios 命中 No 'Access-Control-Allow-Origin' header is present on the requested resource error答案

【问题标题】：Axios hitting No 'Access-Control-Allow-Origin' header is present on the requested resource errorAxios 命中 No 'Access-Control-Allow-Origin' header is present on the requested resource error
【发布时间】：2018-07-26 04:36:08
【问题描述】：

https://samples.openweathermap.org/data/2.5/forecast?appid=be2e163d03a0b97a96a89b0230be8e4a&q=klang,my

当我直接将 URL 粘贴到浏览器中时，我可以成功发出 API 请求。但是，当我尝试使用 Axios 时，我遇到了异常

请求的资源上不存在“Access-Control-Allow-Origin”标头。 Origin 'http://localhost:8080' 因此不允许访问。

根据一些研究，我无法理解背后的逻辑，因为我正在遵循在线课程提供的完全相同的步骤，只需使用 Axios 触发此 API 调用应该能够返回结果。

import axios from 'axios';

const API_KEY = 'be2e163d03a0b97a96a89b0230be8e4a';
const ROOT_URL = `https://samples.openweathermap.org/data/2.5/forecast?appid=${API_KEY}`
export const FETCH_WEATHER = 'FETCH_WEATHER';

export function fetchWeather(city) {
  const url = `${ROOT_URL}&q=${city},my`;
  const request = axios.get(url);

  return {
    type: FETCH_WEATHER,
    payload: request
  }
}

【问题讨论】：

forum.freecodecamp.org/t/…

标签： javascript reactjs

【解决方案1】：

此异常表示您点击的服务器不支持 CORS（跨域资源共享）。
对于openweathermap.org，我认为您应该使用 api.openweathermap.org 而不是 samples.openweathermap.org

【讨论】：

你说得对，我猜我已经向不支持 CORS 的旧端点发出了请求。非常感谢！

【解决方案2】：

以下是我观察到的几件事：

您使用的是 sample api(“samples.openweathermap.org”) 而不是 production one(“api.openweathermap.org”)所以我认为要与应用程序集成，您应该使用生产 API。在此他们提供 CORS 支持。
如果您仍想检查 示例 api 端点，那么

简单的方法是在 google chrome 中添加扩展程序以允许使用 CORS 进行访问。 (https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en-US)

只要您想允许访问没有“access-control-allow-origin”标头请求，只需启用此扩展即可。

或者

在 Windows 中，将此命令粘贴到运行窗口中

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

参考：https://openweathermap.desk.com/customer/portal/questions/16823835-cors

【讨论】：

【解决方案3】：

你需要在你的服务器应用中添加 cors

 var cors = require('cors');
 app.use(cors());

希望有帮助

【讨论】：

【解决方案4】：

当您在浏览器中直接访问该 url 时，不会发出跨域请求。但是，当您使用 axios 访问资源时，您可能会访问不同域上的资源，然后是浏览器选项卡上存在的域。这就是您获得 Access-Control-Allow-Origin 不存在的原因。为了处理这个，在服务器端添加一个逻辑来在 OPTION Response 中添加这个头。

【讨论】：

服务器端和openweathermap.org的服务器一样吗？
我不知道这是什么，但您需要在 spring 或 servlet 中添加类似逻辑的过滤器以在响应中添加“Access-Control-Allow-Origin”。