Перед публикацией здесь я обязательно поищу в Интернете возможные решения этой проблемы.
Я использую Nuxt SSR для внешнего интерфейса и Laravel 7 в качестве внутреннего API, который теперь имеет собственную реализацию CORS. Мое интерфейсное приложение работает на http://localhost:3030, а API на http://gaminghub.test.
Это то, что у меня есть в cors.php, который поставляется с последней версией laravel:
<?php
return [
/*
|--------------------------------------------------------------------------
| Cross-Origin Resource Sharing (CORS) Configuration
|--------------------------------------------------------------------------
|
| Here you may configure your settings for cross-origin resource sharing
| or "CORS". This determines what cross-origin operations may execute
| in web browsers. You are free to adjust these settings as needed.
|
| To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
|
*/
'paths' => ['api/*'],
'allowed_methods' => ['*'],
'allowed_origins' => ['*'],
'allowed_origins_patterns' => [],
'allowed_headers' => ['*'],
'exposed_headers' => false,
'max_age' => false,
'supports_credentials' => true,
];
Используя почтальон, это то, что возвращается при отправке запроса на получение http://gaminghub.test/api/products?category=play-card:
{
"data": [
{
"id": 1,
"name": "Xiaomi",
"price": 2000000,
"description": "Best value for money",
"slug": "xiaomi"
}
],
"links": {
"first": "http://gaminghub.test/api/products?page=1",
"last": "http://gaminghub.test/api/products?page=2",
"prev": null,
"next": "http://gaminghub.test/api/products?page=2"
},
"meta": {
"current_page": 1,
"from": 1,
"last_page": 2,
"path": "http://gaminghub.test/api/products",
"per_page": 1,
"to": 1,
"total": 2
}
}
nuxt.config. js включает в себя:
/*
** Axios module configuration
** See https://axios.nuxtjs.org/options
*/
axios: {
baseURL: "http://gaminghub.test/api",
credentials: true
},
product.vue содержит следующее для извлечения данных:
<script>
export default {
data() {
return {
product: null
}
},
async asyncData({params, app}) {
let res = await app.$axios.$get(`products/?category=${params.slug}`)
return {
product: res.data
}
},
}
</script>
Итак в основном, когда я нажимаю на каждую категорию, они отправляют запрос на получение api/products?category=clicked-category-slug, что приводит к следующей ошибке в консоли:
Access to XMLHttpRequest at 'http://gaminghub.test/api/products/?category=play-card' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
Заголовок сетевого запроса содержит следующее:
Request Headers
Provisional headers are shown
Accept: application/json, text/plain, */*
Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9nYW1pbmdodWIudGVzdFwvYXBpXC9hdXRoXC9sb2dpbiIsImlhdCI6MTU4MzU3MjQ4MiwiZXhwIjoxNTgzNTc2MDgyLCJuYmYiOjE1ODM1NzI0ODIsImp0aSI6ImdYY1Q3WGRSVnFXdUpocFIiLCJzdWIiOjMsInBydiI6Ijg3ZTBhZjFlZjlmZDE1ODEyZmRlYzk3MTUzYTE0ZTBiMDQ3NTQ2YWEifQ.t4JLsLLE6WIFZp67hbafZl8YTLlzN2WyQVw11mETMNQ
Referer: http://localhost:3000/categories/play-card
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.132 Safari/537.36
Ошибка исчезает, и ожидаемые данные возвращаются при перезагрузке браузера. Nuxt работает в режиме universal ssr.
Мне нужно несколько советов, чтобы понять, что может быть причиной этой проблемы. Должно быть, я что-то упускаю