(Laravel & Nginx) CORS header ‘Access-Control-Allow-Origin’ does not match ‘(null)’

Question

I have SPA which located at localhost:8080 and an API at dev.mywebsite, both are running on local server. I tried to use ajax but it returned 'Access-Control-Allow-Origin' twice, screenshot attached. I have no idea why this happen.

Below is my nginx configuration:

# Default server configuration
#
server {
    # Port
    listen 80;
    listen [::]:80;

    # Server Name
    server_name dev.narpandi;

    # Logging
    rewrite_log on;

    # Location of public directory
    root /var/www/personal-website/public;

    # Add index.php to the list if you are using PHP
    index index.php index.html index.htm index.nginx-debian.html;


    location / {
        # First attempt to serve request as file, then
        # as directory, then fall back to displaying a 404.
      try_files $uri $uri/ /index.php?$query_string;
        }

    # Remove trailing slash to please routing system
    if (!-d $request_filename) {
      rewrite ^/(.+)/$ /$1 permanent;
    }

    location ~* \.php$ {
      fastcgi_pass unix:/var/run/php/php7.1-fpm.sock;
      fastcgi_index index.php;
      fastcgi_split_path_info ^(.+\.php)(.*)$;
      fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
      include /etc/nginx/fastcgi_params;

          set $cors "";

          if ($http_origin ~* 'http://localhost:8080')
          {
            set $cors "true";
          }

          if ($cors = 'true')
          {
            add_header 'Access-Control-Allow-Origin' "$http_origin";
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,Pragma,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Mx-ReqToken,X-Requested-With';
          }

          #if ($request_method = 'OPTIONS')
          #{
            #return 204;
          #}
    }

    # Disable all htaccess
    location ~ /\.ht {
      deny all;
    }
}

Did I miss something? Thank you for your help.

-Edited-

Decided to remove Nginx CORS configuration and use barryvdh/laravel-cors because you can specify which routes have CORS by adding middleware.

Here is my code:

config/cors.php

<?php

return [
    'supportsCredentials' => false,
    'allowedOrigins' => ['http://yourwebsite.com'],
    'allowedHeaders' => ['*'],
    'allowedMethods' => ['*'],
    'exposedHeaders' => [],
    'maxAge' => 0,
];

app/Http/Middleware/Cors.php

<?php

namespace App\Http\Middleware;

class Cors
{
  public function handle($request, Closure $next)
  {
    return $next($request)
        ->header('Access-Control-Allow-Origin', '*')
        ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  }
}

app/Http/Kernel.php

protected $routeMiddleware = [
  ...
  'cors' => \Barryvdh\Cors\HandleCors::class
];

And finally use it in your routes:

Route::group(['prefix' => 'about', 'middleware' => [ ..., 'cors']],  function(){ 
  ...
});

Thank you for the help and sorry for the inconvenience.

Answer 1

The problem is that your application is setting CORS headers as well. You need to eliminate one.

Nginx combines duplicate headers into one header separated by a comma. That's what you are getting and that's normal behavior of Nginx.

Answer 2

You are using both NGINX cors and barryvdh/laravel-cors . Both create a header.

Delete the NGINX one should work.