CODEWITHSUNDEEP
angularlaravelcorslaravel-passportlaravel-5.7
Ricky
Ricky

Reputation: 3072

Angular and Laravel CORS Access-Control-Allow-Origin Issues

I have been woking on a Angular (Client) and Laravel (API) application for the past few months locally on my dev machines without any issues. A few days ago i uploaded the applications (client and api) to the server and all of the sudden i started to get CORS errors:

Access to XMLHttpRequest at 'https://api.domain.pt/api/login' from origin 'https://client.domain.pt' 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.

In the beginning of the development i also got those erros because i was using different local domains for both client and api (client.localhost and api.localhost) and ended up solving the issues adding a CORS middleware to my Laravel API:

public function handle($request, Closure $next)
{
    //apply cors only to api routes
    if (Request::segment(1) == 'api') {

        header("Access-Control-Allow-Origin: *"); 

        $headers = [
            'Access-Control-Allow-Methods' => 'POST, GET, OPTIONS, PUT, DELETE',
            'Access-Control-Allow-Headers' => 'X-Requested-With, X-Auth-Token, Content-Type, Origin, Cache-Control, Pragma, Authorization, Accept, Accept-Encoding, X-Login-Origin',
            'Access-Control-Allow-Credentials' => 'true'
        ];

        if ($request->isMethod("OPTIONS")) {
            // The client-side application can set only headers allowed in Access-Control-Allow-Headers
            return Response::make('OK', 200, $headers);
        }

        $response = $next($request);

        foreach ($headers as $key => $value) {
            $response->header($key, $value);
        }
    } else {
        $response = $next($request);
    }

    return $response;
}

All the routes are using the CORS middleware. When the app tries to post to the login api (/api/login) it doesn't even enter the CORS middleware.

Why is this working locally and not in the server?

Upvotes: 1

Views: 5002

Answers (2)

Ricky
Ricky

Reputation: 3072

I've managed to solve my issue. Since my custom CORS middleware isn't being called, i added custom headers to my web.config file:

<configuration>
  <system.webServer>        
    <!-- SOLVES CORS ISSUES -->
    <httpProtocol>
     <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="X-Requested-With, X-Auth-Token, Content-Type, Origin, Cache-Control, Pragma, Authorization, Accept, Accept-Encoding, X-Login-Origin" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
     </customHeaders>
   </httpProtocol>
   <!-- /SOLVES CORS ISSUES -->
  </system.webServer>
</configuration>

Its the most appropriate solution, but i'm going to use it for now. If anyone has any other solution, rather than force custom headers, please reply.

UPDATE:

Temporary solution for Apache. Add this to your .htaccess file:

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "X-Requested-With, X-Auth-Token, Content-Type, Origin, Cache-Control, Pragma, Authorization, Accept, Accept-Encoding, X-Login-Origin, responseType"
Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"

Upvotes: 1

Therichpost
Therichpost

Reputation: 1815

Please follow the below help and reference link for help:

You can check CORS Middleware for Laravel package or below link:

Angular and Laravel CORS Access-Control-Allow-Origin Issues

Upvotes: 1

Related Questions