Axios请求雅虎天气API失败

Question

我正在开发一个vuejs组件，该组件使用axios向雅虎天气API发出ajax GET请求。我收到了一个CORS错误，因为飞行前检查没有通过访问控制检查。

但是，我可以使用jqueries方法向同一个端点发出请求，没有任何问题，并且预期的数据将从服务返回。有人知道为什么会这样吗？

下面是我的vue组件的代码：

<template>
    <div class="tile" id="time-weather">
        <div class="date" v-text='this.date'></div>
        <div class="time" v-text='this.time'></div>
        <div class="temperature" v-text="this.temp"></div>
    </div>
</template>

<script>
    import moment from 'moment';

    export default {
        created() {
            this.refreshTime();
            setInterval(this.refreshTime, 1000);

            this.fetchWeather();
        },
        data() {
            return {
                date: '',
                time: '',
                temp: ''
            }
        },
        methods: {
            refreshTime() {
                this.date = moment().format('ddd DD/MM');
                this.time = moment().format('HH:mm:ss');
            },
            fetchWeather() {
                const endpoint = "https://query.yahooapis.com/v1/public/yql?q=select item.condition from weather.forecast where woeid in (select woeid from geo.places(1) where text='Sunderland') and u='c'&format=json";
                const yapi = axios.create({
                    url: endpoint,
                    method: 'get',
                    withCredentials: false
                });

                const response = yapi.request();
                console.log(response);
            } 

        }
    }
</script>

我在控制台中得到的确切错误消息是：

XMLHttpRequest无法加载https://query.yahooapis.com/v1/public/yql?q=select%20item.condition%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text=%27Sunderland%27)%20and%20u=%27c%27&format=json。对飞行前请求的响应不会通过访问控制检查:请求的资源上没有“访问-控制-允许-原产地”标题。因此，“http://dashboard.dev”源是不允许访问的。

正如我前面提到的，如果我使用jQuery.ajax();向同一个端点发出请求，则不会出现任何问题。

也许我错过了一些明目张胆的事情，但我似乎无法解决这个问题。

任何帮助都将不胜感激。

干杯!

Answer 1

从问题中的当前细节来看，无法确定为什么浏览器要使请求-but失败，原因之一是https://query.yahooapis.com/v1/public/yql端点没有在OPTIONS响应中发送Access-Control-Allow-Origin响应头。

通过这样做，您可以使用curl确认这一点：

curl -X OPTIONS -i \
   -H 'http://dashboard.dev/' \
  'http://query.yahooapis.com/v1/public/yql?q=select%20item.condition%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text=%27Sunderland%27)%20and%20u=%27c%27&format=json'

HTTP/1.1 200 OK
Allow: GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS
Content-Length: 0
Date: Wed, 23 Aug 2017 22:12:40 GMT
Age: 0
Connection: keep-alive
Via: http/1.1 a44.ue.sg3.yahoo.net (ApacheTrafficServer [c sSf ])
Server: ATS

我正在开发一个vuejs组件，该组件使用axios向雅虎天气API发出ajax GET请求。我收到了一个CORS错误，因为飞行前检查…如果我使用jQuery.ajax()向同一个端点发出请求，则不会出现任何问题。

这表明jQuery.ajax()并没有以触发预飞的方式发出请求，但是axios请求是。几乎可以肯定的是，axios请求正在添加一个或多个自定义请求头--我猜可能是X-Requested-With头*-而jQuery.ajax()不是。

*更新：在本例中被添加的标题是X-CSRF-TOKEN__。

要确切地知道到底发生了什么，请检查浏览器发送的OPTIONS请求--特别是该OPTIONS请求中的Access-Control-Request-Headers请求头。它将包含axios请求试图添加到请求中的任何自定义请求头的名称。

您可以查看OPTIONS请求的标题和其他细节，方法是进入浏览器devtools中的网络窗格并重新加载，然后检查那里的OPTIONS请求。

无论如何，有一种方法可以让对该端点的请求按预期的方式工作。您可以通过CORS代理发出请求，方法是将前端代码更改为以下内容：

const proxyurl = "https://cors-anywhere.herokuapp.com/";
const endpoint = "https://query.yahooapis.com/v1/public/yql?q=select item.condition from weather.forecast where woeid in (select woeid from geo.places(1) where text='Sunderland') and u='c'&format=json";
const yapi = axios.create({
    url: proxyurl + endpoint,
    method: 'get',
    withCredentials: false
});

这将通过https://cors-anywhere.herokuapp.com-both、浏览器的预运行OPTIONS请求和GET请求发送请求。后端将请求转发到那个https://query.yahooapis.com/v1/public/yql端点并接收响应。

后端然后将Access-Control-Allow-Origin头添加到响应中--如果是OPTIONS，也是Access-Control-Allow-Headers和Access-Control-Allow-Methods响应头--然后将其传递回请求的前端代码。

然后浏览器将允许您的前端代码访问响应，因为带有Access-Control-Allow-Origin响应头的响应就是浏览器所看到的。

您还可以使用https://github.com/Rob--W/cors-anywhere/轻松地设置您自己的CORS代理。

Answer 2

我得到了一个响应，但是我需要使用https，而不是http --这对于axios和JQuery都是正确的。

运行下面的代码段或此CodePen演示以查看响应：

​

axios.get(
    "https://query.yahooapis.com/v1/public/yql?q=select item.condition from weather.forecast where woeid in (select woeid from geo.places(1) where text='Sunderland') and u='c'&format=json"
  )
  .then(function(result) {
    console.log(result);
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.12.0/axios.min.js"></script>

​