Laravel + Vue.js - CORS проблема с конкретным адресом?

Question

• Laravel 5.6
• Vue 2.5.7
• Google Chrome

Привет, я пытаюсь понять эту проблему CORS, я все еще пытаюсь найти способ использовать этот список: 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.

пока, если я пойду на этот адрес: https://jsonplaceholder.typicode.com/posts/ все работает нормально.

• После использования этого расширения CORS Moesif для Moesif и, таким образом, отключения CORS для 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 Я передаю 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)
        })
}

Ваша помощь приветствуется,

Bud

Answer 1

URL-адрес, который вы пытаетесь использовать, не может использоваться в междоменном домене с javascript, поскольку он не предоставляет заголовок ответа типа «Access-Control-Allow-Origin». В этом случае, если у вас нет контроля над сервером API, вы вынуждены использовать другие нетрадиционные способы, потому что все современные браузеры будут блокировать любые запросы к этому сайту, если домен не совпадает с вашим.

У вас есть 2 варианта решения этой проблемы:

1. Используйте прокси с вашим доменом для перенаправления всех вызовов на этот сервер
2. Сделайте ajax-вызовы на ваш сервер, а затем заставьте ваш сервер напрямую взаимодействовать с сервером api, используя, например, curl

Answer 2

если вы используете это (https://github.com/barryvdh/laravel-cors), убедитесь, что вы отключили токен csrf в середине