- Vue: CLI 3
- Laravel: 6
Ao tentar utilizar requisições diferentes de GET (ex.: POST, DELETE), recebo a seguinte mensagem:
Access to XMLHttpRequest at 'http://127.0.0.1:8000/api/teste' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Configuração do axios:
import axios from "axios"
export const http = axios.create({
baseURL: 'http://127.0.0.1:8000/api',
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST, PATCH, PUT, DELETE, OPTIONS',
'Access-Control-Allow-Headers': '*',
},
})
Exemplo das requisições:
get: () => {
return http.get('teste')
},
store: (data) => {
return http.post('teste', data)
}
Para configurar o CORS, utilizei o seguinte pacote: https://github.com/fruitcake/laravel-cors
Configuração do CORS:
<?php
return [
'paths' => ['api/*'],
'allowed_methods' => ['*'],
'allowed_origins' => ['*'],
'allowed_origins_patterns' => [],
'allowed_headers' => ['*'],
'exposed_headers' => false,
'max_age' => false,
'supports_credentials' => false,
];
Também tentei utilizar o pacote https://github.com/spatie/laravel-cors, mas tive o mesmo resultado: somente o método GET funciona.
Obs.: consigo utilizar outros métodos através do Postman, por exemplo.
Imagem com os headers + erro: