Ошибка CORS при обращении к API на Laravel 7
Написал простой API для домашнего проекта и загрузил его под доменом api.anaxita.ru , но возникла следующая проблема, после загрузки на хостинг.
Делаю fetch запрос с localhost на удалённый API на Laravel 7, который принимает токен и возвращает коллекцию в json:
fetch(`http://api.anaxita.ru/api/products`, {
method: 'GET',
headers: {
'Authorization': 'Bearer wrSWsPWD8Cs8I7oUnoePAbs2u8MutkSXbmo8Kk4P',
'Content-Type': 'application/json'
},
})
.then(function(response) {
return response.json();
})
.then(function(data) {
console.log('Request successful', data);
return data;
})
.catch(function(error) {
console.log('Request failed', error)
})
Получаю следующий ответ в браузере:

Перейдя в network вижу, что браузер отправил 2 запроса (или попытался отправить):

В первом запросе (failed) следующие заголовки:
Response headers:
Provisional headers are shown
Authorization: Bearer wrSWsPWD8Cs8I7oUnoePAbs2u8MutkSXbmo8Kk4P
Content-Type: application/json
Referer: http://fatapp/views/registration/sign-up.php
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.83 Safari/537.36
Во втором запросе следующие заголовки:
Request headers:
Accept: */*
Accept-Encoding: gzip, deflate
Accept-Language: ru-RU,ru;q=0.9,en-US;q=0.8,en;q=0.7
Access-Control-Request-Headers: authorization,content-type
Access-Control-Request-Method: GET
Connection: keep-alive
Host: api.anaxita.ru
Origin: http://fatapp
Referer: http://fatapp/views/registration/sign-up.php
Sec-Fetch-Mode: cors
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.83 Safari/537.36
Response headers:
Allow
Connection: Keep-Alive
Content-Length: 224
Content-Type: text/html; charset=iso-8859-1
Date: Fri, 11 Sep 2020 13:07:13 GMT
Keep-Alive: timeout=2, max=100
Server: Apache/2
Что я пробовал
В файле config/cors.php прописаны следующие разрешения
return [ 'paths' => ['*'], 'allowed_methods' => ['*'], 'allowed_origins' => ['*'], 'allowed_origins_patterns' => [], 'allowed_headers' => ['*'], 'exposed_headers' => [], 'max_age' => 0, 'supports_credentials' => false,];
Пробовал создавать отдельный глобальный middleware и прописать там заголовки
Пробовал добавить файл .htaccess и прописать там заголовки
Обращаться по http а не https
Использовать в запросе mode: no-corse
Локально запросы проходят между фронтом и беком проходят корректно. Запросы из POSTMAN проходят удачно получают код 200.
Прошу вашего совета.
Токен, указанный в запросе, валиден и его можно использовать для запросов.
Ответы (2 шт):
CORS - это к сервису (http://api.anaxita.ru/api/products) либо проксируйте через бек сервер.
CORS - технология современных браузеров, которая позволяет предоставить веб-странице доступ к ресурсам другого домена. Является альтернативой JSONP, бывшей до некоторого времени основным способом преодоления ограничений, наложенных в правиле доменного ограничения относительно XSS-запросов, преодолевая неустранимое ограничение JSONP — невозможность получения данных методом POST.
Сама технология достаточно проста. Есть три домена, желающие загрузить ресурсы с сервера Z. Для того чтобы это стало возможным, веб-серверу Z, который отдает контент, достаточно указать в заголовке ответа Access-Control-Allow-Origin
Проблема решилась переездом на новый хостинг. Прошлый хостинг не разрешал OPTIONS заголовки и не давал возможности их разрешить вручную.