CORS, laravel and POST'ing data

Question

I'm writing a vue app to post data using axios to an API powered by laravel. The APIhas a POST route which is to create a resource. I have CORS set up which allows successful GET'ing of the data. However when I try to POST the data, the network tab shows an OPTIONS request being made with nothing being returned and no POST request follows.

Using axios: a POST request is made with: axios.post(url);

but no POST request is actually made, only the OPTIONS request with: axios.post(url,data).

I made a simple api with slim and didn't have similar problems, so I'm assuming this is something laravel specific?

There are no server log errors, the laravel log shows no errors neither. The error in the browser console is: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://api/api/zones/save. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

UPDATE

These are the headers that are sent as the request:

Host: apiurl
User-Agent: ....
Accept: text/html,application/xhtml+xm…plication/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type
Origin:null
DNT: 1
Connection: keep-alive

I understand about the pre-flight but the API I made with slim passed the pre-flight using the same axios code and the post request was made. I'm not sure why the laravel API isn't doing so.

UPDATE 2 These are the headers for the OPTIONS response

Server  nginx/1.10.3 (Ubuntu)
Content-Type    text/html; charset=UTF-8
Transfer-Encoding   chunked
Connection  keep-alive
Allow   GET,HEAD,POST
Cache-Control   no-cache, private
Date    Fri, 03 Nov 2017 20:46:47 GMT
Content-Encoding    gzip

and this is the code I'm using for the laravel middleware:

public function handle($request, Closure $next)
    {
        return $next($request)
            ->header('Access-Control-Allow-Origin', '*')
            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
       ->header('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type, Accept, Origin, Authorization')
        ;
    }
}

I'm including this code in the Kernel under the 'api' key

The OPTIONS request is a CORS preflight request. It is being sent because your POST request is non-simple. (My answer on the topic: https://stackoverflow.com/a/10636765/710446, second half deals with non-simple requests) If you want a more specific answer for your case (i.e., what is causing your your request to be non-simple?), you'll need to look in your browser's network console and show us the headers of the HTTP request being made. — apsillers, Nov 03 '17 at 16:47
I understand it, but I don't understand _why_ the options is not returning the headers which are already in the middleware (which works for simple requests). I've updated the original question with the headers for the ajax request — user3791372, Nov 03 '17 at 20:28
Can you also show the OPTIONS response? I'm curious if there's a failure on the origin or the allowed headers. This might just be an issue in your CORS middleware, in which case you'll need to show some server code as well. Also, is there really no `content-type` in your request? — apsillers, Nov 03 '17 at 20:59
why dont you include your CORS middleware under main middleware that everything should pass through `$middleware`. What does this mean `I'm including this code in the Kernel under the 'api' key`. Actually for this CORS problem what i am doing is similar to you but I am including my middleware class under main middleware in `protected $middleware = []` array — BetaDev, Nov 03 '17 at 21:27
@WebDev isn't the $middleware for web and api? By putting it just in the 'api' key, the middleware is assigned to just api routes — user3791372, Nov 03 '17 at 21:51

CORS, laravel and POST'ing data

0 Answers0