'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.

use a Cors extension e.g [this](https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en) — Hana Wujira, Mar 14 '19 at 06:52
check this [answer](https://stackoverflow.com/questions/46777212/ionic-3-cors-issue) and [this](https://forum.ionicframework.com/t/http-post-request-error-no-access-control-origin-in-ionic/106029/6) — Hana Wujira, Mar 14 '19 at 07:11

score 0 · Answer 1 · answered Mar 14 '19 at 09:16

0

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

answered Mar 14 '19 at 09:16

jbernach

56
4

score -1 · Answer 2 · answered May 16 '19 at 11:22

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.
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' });

score -1 · Answer 3 · answered Aug 02 '22 at 19:53

-1

You cold also use proxies using proxy.conf.json. You can take a look here https://angular.io/guide/build#proxying-to-a-backend-server

answered Aug 02 '22 at 19:53

Yozmo

521
2
10

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

3 Answers3