Question

Laravel 5.6
Vue 2.5.7
Google Chrome

您好，我正在尝试了解此CORS问题，我仍然在尝试使用this list: https://api.coinmarketcap.com/v2/listings/，并收到以下错误：

(index):1 Failed to load https://api.coinmarketcap.com/v2/listings/: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://tours.mine' is therefore not allowed access.

如果我转到this address: https://jsonplaceholder.typicode.com/posts/，一切正常。

使用此Moesif Chrome CORS extension后，因此禁用了CORS for chrome，我收到了一个新错误：   Request header field X-CSRF-TOKEN is not allowed by Access-Control-Allow-Headers in preflight response.仅在此地址收到：https://api.coinmarketcap.com/v2/listings/



http://tours.mine - 是我在httpd / vhosts.conf中设置的本地名称。



我已经尝试过BarryVdh cors lib，我也创建了自己的CORS中间件，nada。

流速：

web.php路由中的

：

Route::get('/', function () {
    return view('welcome');
});

在welcome.blade中的

我在meta：

中传递了csrf

  <meta name="csrf-token" content="{{ csrf_token() }}">

和脚本：

<script>
    window.Laravel = <?php echo json_encode([
        'csrfToken' => csrf_token(),
    ]); ?>
</script>

我的Vue实例：

<div class="container" id="app">
    <coin-add-component></coin-add-component>
</div>

在我的组件中我有以下钩子：

mounted(){
    this.axios.get('https://api.coinmarketcap.com/v2/listings/')
        .then(response => {
            console.log(response.data);
        })
        .catch(e => {
            this.errors.push(e)
        })
}

感谢您的帮助，

芽

Answer 1

您尝试使用的url不能在跨域中使用javascript，因为它没有提供“ Access-Control-Allow-Origin”类型的响应标头。在这种情况下，如果您对API服务器没有控制权，那么您将不得不使用其他非常规方式，因为如果域与您的域不匹配，则所有现代的掉电服务器都会阻止对该站点的任何请求。

您有2种解决此问题的方法：

使用与您的域相同的代理将所有呼叫重定向到该服务器
对服务器进行ajax调用，然后使用例如curl

Answer 2

如果您正在使用此（https://github.com/barryvdh/laravel-cors），请确保在中间关闭csrf令牌

Laravel + Vue.js - 特定地址的CORS问题？

2 个答案: