Question

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

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

所请求的资源上没有“ Access-Control-Allow-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
  }
}

Answer 1

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

Answer 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开发者会话” --disable-web-security

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

Answer 3

您需要在服务器应用程序中添加cors

Sub Test()
    Dim c As Double
    With ActiveSheet.UsedRange
    Set c = .Find(What:=ActiveSheet.Evaluate("=LARGE(V17:V57,COUNTIF(V17:V57,"">0"")+1)"), LookIn:=xlValues)
            If c <> 0 Then
            c.Select
            End If
    End With
 End Sub

希望获得帮助

Answer 4

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

在请求的资源错误上，Axios命中没有“ Access-Control-Allow-Origin”标头

4 个答案: