当我尝试使用 Axios 调用 Instagram API 时，我“被 CORS 政策阻止” [重复]答案

【问题标题】：I'm getting "blocked by CORS policy" when I try to call Instagram API using Axios [duplicate]当我尝试使用 Axios 调用 Instagram API 时，我“被 CORS 政策阻止” [重复]
【发布时间】：2019-12-13 13:55:18
【问题描述】：

我正在尝试在一个使用 Vue 作为前端的 Laravel 应用程序中从我的 Instagram 帐户中获取一些图像。当我尝试在独立的 Vue 应用程序中执行此操作时，它运行良好，但是当我使用 Laravel 执行此操作时，我收到一条消息说“已被 CORS 策略阻止：Access 不允许请求标头字段 x-csrf-token - 预检响应中的 Control-Allow-Headers。"

我正在使用 Laravel 5.8 以及内置的 Vue 和 Axios，并且我使用 Homestead 作为我的本地主机服务器。

我尝试了很多在这里和 Google 上找到的技巧，但都没有成功。基本上，我正在尝试最基础的 Axios 调用

        beforeMount() {
            axios.get('https://api.instagram.com/v1/users/self/media/recent/?access_token=[MY_ACCESS_TOKEN]').then(response => console.log(response))
        }

我已经在 Laravel 上创建了一个 Cors 中间件，并在 Axios 上尝试了很多标头设置。

我基本上是在尝试检索我的 Instagram 帖子列表并绕过该 cors / x-csrf 错误。

【问题讨论】：

您是否将x-csrf-token 标头添加到Cors.php 文件中的允许列表中。

标签： laravel vue.js cors axios csrf

【解决方案1】：

您对 Instagram 端点的AJAX 请求必须作为jsonp 请求发送，这意味着请求的dataType 必须是jsonp。

This blob 包含在axios 中使用jsonp 的示例。

这是一个向 Instagram 端点发送带有 jsonp 数据类型的 AJAX 请求的示例。

$.ajax({
    url: "https://api.instagram.com/v1/users/self/media/recent/?access_token=[MY_ACCESS_TOKEN]",
    type: "GET",
    crossDomain: true,
    dataType: "jsonp",
    success: function(response){
        console.log(response);
    }
});

【讨论】：

@hugolcouto 不要忘记给答案投票 :)
这建议为 jQuery 切换 axios。这有点适得其反。
感谢您的建议！我已经安装了 jsonp npm 包并使用它而不是 axios。我没有在上面使用jquery。

【解决方案2】：

Laravel 自动将 X-CSRF-TOKEN 标头应用于所有 axios 请求。这样您就可以与您的应用程序进行通信，而不必每次都为 POST、PUT、DELETE 等传递 CSRF 令牌。

resources/js/bootstrap.js（默认设置）

/**
 * Next we will register the CSRF Token as a common header with Axios so that
 * all outgoing HTTP requests automatically have it attached. This is just
 * a simple convenience so we don't have to attach every token manually.
 */

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

您应该能够通过执行以下操作删除有问题的标题：

beforeMount() {

    // create a new instance so we don't delete the csrf token for other requests
    let instance = axios.create();

    // delete the x-csrf-token header
    delete instance.defaults.headers.common['X-CSRF-TOKEN'];

    // use the new instance to make your get request
    instance.get('https://api.instagram.com/v1/users/self/media/recent/?access_token=[MY_ACCESS_TOKEN]')
        .then(response => console.log(response))
}

【讨论】：