jquery - Axios 对雅虎天气 API 的请求失败

Question

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

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

这是我的 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 cannot load 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. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://dashboard.dev' is therefore not allowed access.

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

我可能遗漏了一些明显的东西，但我似乎无法解决这个问题。

任何帮助将不胜感激。

干杯!

Answer 1

仅从问题中的当前详细信息来看，无法确定为什么您的浏览器会显示 CORS preflight OPTIONS request -但可以确定的一件事是，它失败的原因是 https://query.yahooapis.com/v1/public/yql端点不发送Access-Control-Allow-Origin OPTIONS 中的响应 header 回应。

您可以使用 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

I am working on a vuejs component that makes an ajax GET request to the Yahoo weather API using axios. I am receiving a CORS error in that the preflight check… if I make the request using jQuery.ajax() to the same endpoint, the request is sent with no issues.

这表示jQuery.ajax()没有以触发预检的方式发出请求，但 axios 请求是。几乎可以肯定，axios 请求会添加一个或多个自定义请求 header — 我猜可能是 X-Requested-With header ＊—其中jQuery.ajax()不是。

* 更新:在这种情况下，添加的 header 是 X-CSRF-TOKEN .

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

您可以查看 OPTIONS 的标题和其他详细信息通过进入浏览器开发工具中的“网络” Pane 并重新加载，然后检查 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 发送请求—浏览器的预检OPTIONS请求和您的GET要求。那里的后端将请求转发给https://query.yahooapis.com/v1/public/yql端点并接收响应。

然后后端添加 Access-Control-Allow-Origin响应的 header - 在 OPTIONS 的情况下，也是Access-Control-Allow-Headers和Access-Control-Allow-Methods响应 header ，然后将其传递回您请求的前端代码。

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

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