W
W
WebDev2018-11-28 14:07:04
Laravel
WebDev, 2018-11-28 14:07:04

How to set up CORS in Laravel?

Every time I need to send ajax requests to laravel, I run into the same problem. I get an error like

Access to XMLHttpRequest at 'xxx' from origin ' localhost:8080 ' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource .
.
The reason is clear: a request from another domain. But the fact is that Laravel has Middleware installed, which adds the following code
public function handle($request, Closure $next)
    {
       header('Access-Control-Allow-Headers: *');
        header('Access-Control-Allow-Methods: *');

        return $next($request);
    }

This code doesn't help. The only thing that helps is to send requests through jquery. I came to this out of desperation at random.
In general, the application is on vue and for requests to api, I try to use axios, which gives the above error. When replaced with jquery everything works. Having opened the developer console, I see that jquery sends a POST request, and axios for some reason OPTIONS. OPTIONS sends not only axios, but also other libraries that I tried to use. The thing always ended with me spitting on it and including jquery.
I've read everything I can on google. This is some kind of idiocy, people write that they have the same problems, and they are advised to insert Access-Control-Allow-Headers: * headers, and if the asterisk does not work, then list them manually.
This is a very common problem, and probably a minor one, but for some reason it does not google at all.
Having once again faced and decided to throw out jquery, I want to finally figure out what's wrong.
To sum up question 2:
1) Why are the vue-resource and axios libraries (and probably many others) sending an OPTIONS request when I'm asking for a POST. And why jQuery does not send this OPTIONS. I understand that this is the reason.
2) How to make OPTIONS (if this is the reason) processed. Because no headline variations help, I just haven't tried it.
Help, please, otherwise you will have to score and send requests through jQuery again.
UPD
Here is the data from the developer console:
General:
Request URL:xxx
Request Method: OPTIONS
Status Code: 200
Remote Address: xxx:443
Referrer Policy: no-referrer-when-downgrade
Response headers:
allow: GET,HEAD,POST,PUT,PATCH,DELETE
cache-control: no- store, no-cache, must-revalidate, no-cache
UPD2:
Here is what the request info looks like via jQuery
General:
Request URL: xxx
Request Method: POST
Status Code: 200
Remote Address: xxx:443
Referrer Policy: no-referrer -when-downgrade
Response headers:
access-control-allow-origin: *
cache-control: no-store, no-cache, must-revalidate, no-cache
That is, jQuery sends POST and receives access-control-allow-origin: *, and axios sends OPTIONS and receives allow: GET,HEAD,POST,PUT,PATCH,DELETE
UPD3:
Here people write that adding headers directly to routes. php helps. Checked it really works. It turns out that the request "breaks" before it is processed by the middleware. The solution is to add middleware for the entire project. But after all it is necessary to me only for certain routes.

Answer the question

In order to leave comments, you need to log in

2 answer(s)
R
roadtoexp, 2018-11-28
@roadtoexp

Here is the package to use. https://github.com/barryvdh/laravel-cors

A
adilet970113, 2018-12-06
@adilet970113

at the nginx level, you can configure the site for CORS. here is an example config https://gist.github.com/adiletmaks/cf2ff906ed0c9d3...

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question