http://localhost:8100' has been blocked by CORS policy error

Question

I am having rest api's in php and I am trying to access in ionic application but I am getting cross policy error.

this is my php headers I am setting

  <?php
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
    header('Access-Control-Allow-Headers: Content-Type,Accept,Authorization');

This is my ionic code from where i am calling the api

import { HttpClient } from '@angular/common/http'

constructor(public http: HttpClient
  ){}
 login(body){
     return this.http.post(SERVER_URL+LOGIN,body);

  }

And this is the error I am getting

Access to XMLHttpRequest at 'http://myIP_ANd_Port/icrm_mobile_mar12/index.php/login_api' from origin 'http://localhost:8100' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

Answer 1

You need to be able to respond to requests using the OPTIONS method in your PHP app.

Your browser or app is sending an OPTIONS request (the preflight) that is not being served.

For more info you can see this answer: CORS with php headers

Answer 2

1. One way to override the CORS policy is to install an extension. It Adds the Allow-Control-Allow-Origin: * header to the all the responses that your browser receives.
2. Another thing you can do is to specify in your request, that you want to bypass the CORS secure mechanism. You can do it if you use Fetch API by setting the mode parameter to no-cors: Like fetch('http://localhost:8080/posts', { mode: 'no-cors' });