Access to XMLHttpRequest has been blocked by CORS policy. No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

When I try to send an email trough an api, i get this message:

Access to XMLHttpRequest at 'https://api.urosciric.com/mail' from origin 'https://urosciric.com' 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.

I've seen many solutions of which none are the same and none of them worked so far.

Angular code:

    const httpOptions = {
      headers: new HttpHeaders({
        "Content-Type": "application/json",
        "Access-Control-Allow-Origin": "*"
      })
    };

    this.http.post('https://api.urosciric.com/mail',
      { firstName: this.FirstName, lastName: this.LastName, email: this.Email, phone: this.Phone, text: this.Text },
      httpOptions)
      .pipe(catchError(err => {
        this.onMailSend(false);
        return throwError(err);
      })).subscribe(data => {
        this.onMailSend(true);
        return data;
      });

Laravel (api) code:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Mail;
use Illuminate\Support\Facades\Validator;

use App\Mail\General;

class MailController extends Controller
{
    public function send(Request $request){

            $firstName = $request -> input('firstName');
            $lastName = $request -> input('lastName');
            $email = $request -> input('email');
            $text = $request -> input('text');
            $phone = $request -> input('phone');

            $to = "ciricbgd@gmail.com";
            $subject = "[urosciric.com] email from ".$firstName." ".$lastName;
            $txt = $text;
            $headers = "From: mail@urosciric.com";

            mail($to,$subject,$txt,$headers);

            return response()->json('Mail sent. Thank you!', 201); 

        return response()->json('Mail not sent. Please try contacting me directly at ciricbgd@gmail.com',400);
    }
}

When i try in development or prod mode, I get this error, but when I use postman or api testing software, everything works fine.

Answer 1

Firstly, You have to understand for the CORS policy response to handle the request, the backend/API is always responsible. So any addition to your Angular frontend would not help.

Secondly, in the simple words, most browsers has CORS policy to enforce preventing issues related to CSRF attacks. so, If you access with Incognito Mode it will not give you CORS error. In addition, when you are using POSTMAN or other API testing software they are simply Developer Tools, not browsers, so they don't care about CORS.

As for the solution, you need to create a Global Middleware to handle this CORS issue.

If you are using Laravel API MicroFramework Lumen -

Middleware handle():

public function handle($request, \Closure $next)
{
    $headers = [
        'Access-Control-Allow-Origin'      => '*',
        'Access-Control-Allow-Methods'     => 'GET, POST, PUT, PATCH, OPTIONS, DELETE',
        'Access-Control-Allow-Headers'     => 'Accept, Content-Type, Origin, Authorization, X-Requested-With, Content-Language, Subject'
    ];

    if ($request->isMethod('OPTIONS'))
    {
        return response()->json('{"method":"OPTIONS"}', 200, $headers);
    }

    $response = $next($request);

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

    return $response;
}

Then, register this middleware in bootstrap/app.php to work :

$app->middleware([
   ...
   App\Http\Middleware\CorsMiddleware::class,
]);

So when any requests comes to your API it will pass through this middleware and will be verified as a valid request.

Answer 2

you need to create a proxy.conf.json file and add these properties to it

{
"/": {
                "target": "http://api.urosciric.com/mail",
                "secure": false,
                "logLevel": "debug"
  }
}

then you have to addd this file to angular.json under options with it's path like so

"serve": {
 "options": {
        "browserTarget": "app:build",
        "proxyConfig": "src/proxy.conf.json"
      },
   }

that's worked for me hopes it work with you