Cors OPTIONS method in Axios fails with Laravel and Nginx

user_1469734 0
Viewed 2800

I made an webapp with (Vue)Axios. All GET-requests work perfectly, but when doing a POST-request it fails..

In the network-response I see that it sends OPTIONS instead of POST:

OPTIONS https://api.website.com/sheeps

In Chrome I get this reponse:

OPTIONS https://api.website.com/sheeps net::ERR_NAME_NOT_RESOLVED

And in Safari:

Failed to load resource: cancelled
XMLHttpRequest cannot load https://api.website.com/sheeps due to access control checks.

This is probably failing because of the API application I wrote in Laravel 5.5. So I added this package LaravelCors. From the docs it tells me that'll fix it. The config is like this:

[
    'supportsCredentials' => true,
    'allowedOrigins'      => ['*'],
    'allowedHeaders'      => ['*'],
    'allowedMethods'      => ['*'],
    'exposedHeaders'      => [],
    'maxAge'              => 0,
]

And configured it like it's written in the docs.

But it doens't fix it at all.

Server is running on Nginx. Is thát maybe the place to configure things or can I fix it with my Laravel application?

Implemented this also for Nginx config:"Wide open nginx CORS configuration"

I'm testing it all from an application from my localhost:8080.

laravel-5 axios vuejs2 vue.js nginx
1 Answers

enable-cors-and-php-fpm.conf

add_header 'Access-Control-Allow-Origin' '*' always; this "always" is very import to allow 4** 3** 5** php-response-code through nginx

you may have to costomize "Access-Control-Allow-Headers" value

location ~ [^/]\.php(/|$)
    {

        # CORS settings
        # http://enable-cors.org/server_nginx.html
        # http://10.10.0.64 - It's my front end application
         if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*' always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            #
            # Custom headers and headers various browsers *should* be OK with but aren't
            #
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Authorization';
            #
            # Tell client that this pre-flight info is valid for 20 days
            #
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain; charset=utf-8';
            add_header 'Content-Length' 0;
            return 204;
         }
         if ($request_method = 'POST') {
            add_header 'Access-Control-Allow-Origin' '*' always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
            add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Authorization';
         }
         if ($request_method = 'GET') {
            add_header 'Access-Control-Allow-Origin' '*' always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
            add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Authorization';
         }
         try_files $uri =404;
         fastcgi_pass  127.0.0.1:9000;
         fastcgi_index index.php;
         include fastcgi.conf;

    }

www.your-api.com.conf

server {
    listen       80;
    server_name  localhost;
    root   /home/admin.api.qmmian.cn/public;
    index index.php index.html index.htm;
    ## laravel config
    location / {
        try_files $uri/ /index.php?$query_string;
    }
    ##enable cors and enable php-fpm
    include enable-php-cors.conf;

}

fastcgi.conf

fastcgi_param  SCRIPT_FILENAME    $document_root$fastcgi_script_name;
fastcgi_param  QUERY_STRING       $query_string;
fastcgi_param  REQUEST_METHOD     $request_method;
fastcgi_param  CONTENT_TYPE       $content_type;
fastcgi_param  CONTENT_LENGTH     $content_length;

fastcgi_param  SCRIPT_NAME        $fastcgi_script_name;
fastcgi_param  REQUEST_URI        $request_uri;
fastcgi_param  DOCUMENT_URI       $document_uri;
fastcgi_param  DOCUMENT_ROOT      $document_root;
fastcgi_param  SERVER_PROTOCOL    $server_protocol;
fastcgi_param  REQUEST_SCHEME     $scheme;
fastcgi_param  HTTPS              $https if_not_empty;

fastcgi_param  GATEWAY_INTERFACE  CGI/1.1;
fastcgi_param  SERVER_SOFTWARE    nginx/$nginx_version;

fastcgi_param  REMOTE_ADDR        $remote_addr;
fastcgi_param  REMOTE_PORT        $remote_port;
fastcgi_param  SERVER_ADDR        $server_addr;
fastcgi_param  SERVER_PORT        $server_port;
fastcgi_param  SERVER_NAME        $server_name;

# PHP only, required if PHP was built with --enable-force-cgi-redirect
fastcgi_param  REDIRECT_STATUS    200;
user_61125800
Related