Question

我正在尝试从Laravel应用程序中以Vue为前端的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错误。

Answer 1

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))
}

Answer 2

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

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

这是将AJAX数据类型的jsonp请求发送到Instagram端点的示例。

$.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);
    }
});

尝试使用Axios调用Instagram API时，我受到“ CORS策略的阻止”

2 个答案: