Сбой Axios CORS / Preflight с вызовом API Laravel 5.4

У меня проблема с Laravel 5.4 и моим приложением React, которое использует Axios для обработки запросов.

Вот ошибка, которую я получаю.
ошибка

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

Вот неудачный запрос после предварительной проверки:
введите описание изображения здесь

Вот моя конфигурация запроса Axios:

let req = axios({
method: "GET",
url: https://api.vendorgraphs.com/{queryStringHere}
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + accessToken
}
});

Следует отметить одну интересную вещь: она указывает конечную точку с использованием протокола HTTPS. Похожие запросы на мое приложение работают, как и должно быть, но это единственный сбой. Это из-за использования строки запроса?

Запрос попадает в конечную точку API как запрос GET. Я использую Laravel и пакет laravel-cors для обработки моих запросов cors.

Вот моя конфигурация для CORS:

Это в моем Kernel.php

protected $middleware = [
\Barryvdh\Cors\HandleCors::class,
\Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode::class,
\Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
\App\Http\Middleware\TrimStrings::class,
\Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
];

и мой cors.php в папке конфигурации

return [
'supportsCredentials' => false,
'allowedOrigins' => ['*'],
'allowedHeaders' => ['*'],
'allowedMethods' => ["GET", "OPTIONS", "POST", "PUT", "PATCH", "DELETE"],
'exposedHeaders' => [],
'maxAge' => 0,
];

Я ясно вижу, что предварительная проверка не выполняется во вкладке сети. Однако я не понимаю, почему я получаю ошибку смешанного содержимого вместо 405 или какого-либо другого кода состояния HTTP. Кажется странным, что это говорит о том, что я запрашиваю конечную точку, используя протокол HTTP, когда я явно устанавливаю URL с помощью HTTPS.

Я застрял на этом в течение некоторого времени и мог бы использовать некоторое понимание этого вопроса.
Похоже, что у многих людей были «похожие» проблемы с предполетами OPTIONS. Я сделал такие вещи, как создание промежуточного программного обеспечения, которое просто возвращает код состояния HTTP 200, если для запроса используется метод OPTIONS. Но это тоже не сработало. Измените запрос на OPTIONS для Axios и измените маршрут на Laravel на что-то вроде:

Route::options("/api/endpoint", controller@method);

тоже не сработало. Я просто не понимаю, почему он перенаправляет на HTTP-протоколы и возвращает ошибки смешанного содержимого, когда кажется, что это не имеет никакого отношения к CORS, но предварительный запрос не выполняется, что указывает на проблему с CORS. Любое понимание приветствуется.

<IfModule mod_rewrite.c>
<IfModule mod_negotiation.c>
Options -MultiViews
</IfModule>

RewriteEngine On

# Redirect Trailing Slashes If Not A Folder...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)/$ /$1 [L,R=301]

# Handle Front Controller...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [L]

# Handle Authorization Header
RewriteCond %{HTTP:Authorization} .
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

RewriteCond %{HTTPS} !=on
RewriteCond %{HTTP:X-Forwarded-Proto} ^http$
RewriteRule .* https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>

3

Решение

Причина проблемы, которую вы видите, в том, что сам сервер перенаправляет https URL к http:

$ curl -I 'https://api.vendorgraphs.com/api/dealershipvendorleads/?id=3,4&startDate=2017-4&endDate=2017-8'

HTTP/1.1 301 Moved Permanently
Content-Type: text/html; charset=iso-8859-1
Date: Wed, 20 Sep 2017 15:33:50 GMT
Location: http://api.vendorgraphs.com/api/dealershipvendorleads?id=3,4&startDate=2017-4&endDate=2017-8
Server: Apache
Connection: keep-alive

Обратите внимание на 301 код состояния и Location заголовок с http://api.vendorgraphs.com/…

Так что это означает, что вы не можете сделать перекрестный запрос к этой конечной точке API из безопасного контекста (https страница) без браузеров, блокирующих его как смешанный контент (как вы видите).

Так что на самом деле это не проблема CORS — это проблема смешанного контента.

3

Другие решения

Других решений пока нет …