Axios - 缺少 'Access-Control-Allow-Origin' 头信息

Question

我有点不明白。我一直在努力让 API 调用正常工作。然后，我把 URL 拆分成如下格式，它可以正常工作——确切地说，只能工作一次。之后再也无法正常工作了。我发誓没有更改任何内容。

在 AXIOS 中该怎么做呢？

错误信息：

XMLHttpRequest 无法加载http://magicseaweed.com/api/W2Z26fXscpELi7nPB0svfqcGj9FtGO9e/forecast/?spot_id=228。 所请求的资源中没有'Access-Control-Allow-Origin'标头。因此，来自'http://localhost:8080'的来源被禁止访问。

import axios from 'axios';

const ROOT_URL = `magicseaweed.com/api/W2Z26fXscpELi7nPB0svfqcGj9FtGO9e/forecast/`;

export const FETCH_WEATHER = 'FETCH_WEATHER';

export function fetchWeather() {
    const url = `http://${ROOT_URL}?spot_id=228`;
    const request = axios.get(url);

    return {
        type: FETCH_WEATHER,
        payload: request
    };
}

我尝试使用这个修改后的GET请求，但是没有成功

axios({
  url: url ,
  headers: {"Access-Control-Allow-Origin": "*"},
});

- morne

---

好的，说得有道理。但是看了一下axios文档，我没有找到配置这个的方法。我尝试了一些其他选项，但都没有成功。我会把它列出来。 - morne

我刚刚调用了url https://magicseaweed.com/api/W2Z26fXscpELi7nPB0svfqcGj9FtGO9e/forecast/?spot_id=228，除了CORS引起的错误外，服务器似乎响应了一个500，这表明他们那边发生了意外的错误。你确定API没有问题吗？有时候，如果有错误（在这种情况下是500），实施服务器API的人会忘记在响应中添加CORS头信息。 - fabio.sussetto

你刚刚在问题中做的更改并不能解决任何问题，那个头部应该在服务器响应中返回，而不是在请求中发送。这是服务器 API 的工作。 - fabio.sussetto

调用API没有任何问题：curl magicseaweed.com/api/W2Z26fXscpELi7nPB0svfqcGj9FtGO9e/forecast/?spot_id=228但是你不能在浏览器中调用它。 - Robert Moskal

@fabio.sussetto，您列出的网址是https。这会导致失败。如果您将s删除，只使用http，它就可以正常返回了。很抱歉我这么蠢，但今天是我第一次遇到这个问题。 - morne

Answer 1

Look here:

https://www.npmjs.com/package/magicseaweed

在底部，它解释了为什么他们的API封装无法在浏览器中工作。原因与您无法在浏览器中进行Ajax调用相同。

常见问题解答

我能在使用browserify的浏览器中使用此模块吗？

理论上可以，但是Magicseaweed API目前不会在浏览器请求中发送Access-Control-Allow-Origin头信息（如果您通过cURL重新发送请求，则会发送头信息）。

所以，如果API更改了这种行为，此模块将可以与browserify一起使用。

您可以搭建自己的代理服务器，或者使用互联网上提供的免费代理之一：

https://developer.yahoo.com/yql/

https://crossorigin.me/

- Robert Moskal

---

我正在尝试自己调用它，可以确认该API没有返回Access-Control-Allow-Origin头，所以它不适用于AJAX。顺便说一下，这是axios，而不是browserify :) 编辑：抱歉刚看到他们在npm页面上也这么说，这就是你为什么说browserify :) - fabio.sussetto