Запрос Axios: заблокирован политикой CORS - PullRequest
1 голос
/ 14 мая 2019

В laravel 5.8, / "vue": "^2.5.17" / "axios": "^0.18" мне нужно прочитать внешние данные, которые читаются почтальоном, ок: https://imgur.com/a/SRBmK0P

Я пытаюсь прочитать эти данные, используя axios, и получил ошибку: https://imgur.com/a/o97xLm7

В просмотре я вижу детали запроса: https://imgur.com/a/EUkyV43

Мой код JS:

            axios.post(window.REMOTE_SEARCH_WEB, {
                "query": "pc gamers",
                "blogger": false,
                "company": false,
                "influencer": false,
                "article": false,
                "pageId": 1,
                "sort": null,
                "sortOrder": null,
                "searchType": 1,
                "Access-Control-Allow-Origin": this.app_url,
                "Access-Control-Allow-Methods": "POST",
                "Access-Control-Max-Age": 86400,
                "Access-Control-Allow-Headers": "Content-Type, Authorization",
                'Access-Control-Allow-Credentials': 'true'
            }).then((response) => {

, где this.app_url является домом url сайтаприложение работает на.

Поиск в Google Я нашел несколько параметров Access-Control-* должны быть заполнены, как в коде выше, но это не помогло мне.

Можете ли вы сказать, как я могу это исправить?

Может ли быть решение из моего js-кода с axios запустить действие в моем контроле и оттуда сделать запрос с использованием PHP / Laravel?Если да, приведите пример такого решения ...

МОДИФИЦИРОВАННЫЙ БЛОК: Я установил https://github.com/barryvdh/laravel-cors пакет и

1) в файле, который я добавилв app / Http / Kernel.php

protected $middleware = [
    // ...
    \Barryvdh\Cors\HandleCors::class,
];

Я добавил в группу промежуточного программного обеспечения I, что это не внутренний / api, а внешний запрос.Это правильно?

2) Я оставил файл config / cors.php без изменений:

return [

    'supportsCredentials' => false,
    'allowedOrigins' => ['*'],
    'allowedOriginsPatterns' => [],
    'allowedHeaders' => ['*'],
    'allowedMethods' => ['*'],
    'exposedHeaders' => [],
    'maxAge' => 0,

];

3) В запросе axios.post я удалил все параметры Access-Control

axios.post(window.REMOTE_SEARCH_WEB, {
    "query": "pc gamers",
    "blogger": false,
    "company": false,
    "influencer": false,
    "article": false,
    "pageId": 1,
    "sort": null,
    "sortOrder": null,
    "searchType": 1,
}).then((response) => {

4) Но та же ошибка в запросе: https://imgur.com/a/wbgmrps

Что не так?

Спасибо!

Ответы [ 2 ]

1 голос
/ 14 мая 2019

Вы можете решить эту проблему, создав промежуточное программное обеспечение перехватчика в вашем бэкэнде, которое прикрепит заголовки Access-control-allow к запросу.

Создайте связующее ПО cors

public function handle($request, Closure $next)
    {
        return $next($request)
          ->header('Access-Control-Allow-Origin', '*') //REPLACE STAR WITH YOUR URL
          ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE, OPTIONS')
          ->header('Access-Control-Allow-Headers', 'content-type, authorization, x-requested-with');
    }

Затем перечислитепромежуточное ПО в глобальном списке промежуточного ПО в app / http / kernel.php

 protected $middleware = [
             ...
             \App\Http\Middleware\Cors::class
]
0 голосов
/ 20 июля 2019

Вся информация, которую вы нашли о заголовках для связи CORS, верна, но должна быть задана на сервере API, который вы используете, а не на сервере, с которого вы звоните.

Вы пытались добавить эти заголовки вВаш ajax-вызов установил и установил пакет laravel-cors, однако они установлены как на вызывающем сервере (один - на стороне клиента с javascript, другой - на стороне сервера на laravel).

Надеемся, что у вас есть контроль надApi-сервер, который вы используете с вашим приложением laravel / vue, первое, что вам нужно сделать, это добавить эти заголовки во все ваши ответы API:

header('Access-Control-Allow-Origin: <insert calling domain here>')
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');  // Use only the methods you are using

В режиме разработки вы можете просто использовать Access-Control-Allow-Origin: *, однако вВ производственной среде настоятельно рекомендуется использовать правильный домен.Вам разрешено использовать подстановочный знак для частичных URL, однако не забудьте указать порт, если вы не используете 80/443.(ex. Access-Control-Allow-Origin: *.mydomain.com:8080.

Однако этого недостаточно, по умолчанию laravel включает библиотеку bootstrap.js в свой app.js, что вызывает включение заголовка токена CSRF во все вызовы ajax, сделанные с помощьюaxios. Вот часть исходного кода в ресурсах \ js \ bootstrap.js, ответственная за это:


/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * 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');
}

А вот заголовок вызова axios, который я только что сделал из laravel axios call

Как видите, для работы CORS на вашем API-сервере необходимо указать 2 заголовка. Вот третий параметр, который вы должны добавить:

header('Access-Control-Allow-Headers: X-CSRF-TOKEN, X-Requested-With');

Вы можетечтобы можно было установить больше заголовков, просто проверьте свой вызов и добавьте все из них, если вы забыли какой-либо из них, он будет указан в консоли браузера. Однако будьте осторожны, чтобы не использовать подстановочный знак *, поскольку он не поддерживаетсяздесь.

Если у вас нет контроля над сервером API, это усложняется.

Если сервер API уже поддерживает Access-Control-Allow-Origin: *, вы можете удалить свойX-CSRF-КЗаголовки KEN и X-Requested-With из bootstrap.js, однако, будьте осторожны, поскольку они используются для внутренних вызовов API от vue к вашему внутреннему интерфейсу laravel.

В качестве альтернативы вы можете работать с прокси с тем же доменомваш сервер Laravel или вы можете использовать свой сервер Laravel, чтобы сделать вызовы API для вас.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...