Вся информация, которую вы нашли о заголовках для связи 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
Как видите, для работы 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 для вас.