In my project, my custom header cause CORS and when I remove it from request headers, everything works truly.
Laravel is my back-end and I send requests with axios.
Here is my middleware to add CORS headers to response,
public function handle($request, Closure $next)
{
$response = $next($request);
$response->header('Access-Control-Allow-Credentials', 'true');
$response->header('Access-Control-Allow-Origin', '*');
$response->header('Access-Control-Allow-Methods', 'OPTIONS, GET, POST, PATCH, PUT, DELETE');
$response->header('Access-Control-Allow-Headers', 'Auth-Type, X-API-KEY, Origin, Content-Type, Accept, Authorization');
return $response;
}
Auth-Type
is my custom header and my front-end request is like,
function getCities(data) {
return axios({
method: 'get',
url: appConstants.BASE_URL + '/city/query',
headers: {
'Content-Type': 'application/json',
'Auth-Type': 'admin'
},
params: data
});
}
When I send the request containing Auth-Type
, Chrome log me an error like:
Failed to load http://example.com/api/v1/city/query: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 405.
As you seen in my CORS middleware, I added Auth-Type
as my allowed headers in Access-Control-Allow-Headers
. Also in this situation (I mean custom headers passing), the get
method converts to OPTIONS
.
Any solutions will appreciate.
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire