CORS problem


I’m using http request using ‘@angular/http’, all things are okey while I’m testing on my local host, yet, when I want to try it with a real site I get following error:

Access to XMLHttpRequest at 'MYSERVICE' from origin 'http://localhost:8101' 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.

So I did a few thing none of them worked:
first I added the following code to my site’s htaccess:

# REST Begin
<ifmodule mod_headers.c="">
   SetEnvIf Origin "^(.*\.MYSITE\.com)$" ORIGIN_SUB_DOMAIN=$1
   Header set Access-Control-Allow-Origin "%{ORIGIN_SUB_DOMAIN}e" env=ORIGIN_SUB_DOMAIN
   Header set Access-Control-Allow-Methods: "*"
   Header set Access-Control-Allow-Headers: "Origin, X-Requested-With, Content-Type, Accept, Authorization"


which didn’t help to solve:
Second I added following hook to my site (which is wordpress):

add_filter( 'wp_headers', array( 'ar_send_cors_headers' ), 11, 1 );
function ar_send_cors_headers( $headers ) {

    $headers['Access-Control-Allow-Origin']      = get_http_origin(); // Can't use wildcard origin for credentials requests, instead set it to the requesting origin
    $headers['Access-Control-Allow-Credentials'] = 'true';

    // Access-Control headers are received during OPTIONS requests
    if ( 'OPTIONS' == $_SERVER['REQUEST_METHOD'] ) {

        if ( isset( $_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD'] ) ) {
            $headers['Access-Control-Allow-Methods'] = 'GET, POST, OPTIONS';

            $headers['Access-Control-Allow-Headers'] = $_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS'];


    return $headers;

this action return every thing with a header which is set

NO HELP here too

then I used following action:

    function ar_customize_rest_cors(){
        remove_filter( 'rest_pre_serve_request', 'rest_send_cors_headers' );
        add_filter( 'rest_pre_serve_request', function( $value ) {
            header( 'Access-Control-Allow-Origin: *' );
            header( 'Access-Control-Allow-Methods: POST' );
            header( 'Access-Control-Allow-Credentials: true' );
            header( 'Access-Control-Expose-Headers: Link', false );
            header( 'Access-Control-Allow-Headers: X-Requested-With' );
            return $value;
        } );

add_action('init', 'ar_customize_rest_cors');

this one add header to init hook which is the first thing that fire after site called.

No help here too

Then I tried a plugin for chrome “Enable cross-origin resource sharing”

No help here too

finally I started to fix it on my app I did two things:


// const headerDict = {
//   'Content-Type': 'application/json',
//   'Accept': 'application/json',
//   'Access-Control-Allow-Headers': '*'
// }

// const requestOptions = {
//   headers: new Headers(headerDict),
// };

then I added requestOptions to header of my request form server

It didn’t work!

finally I did my last try:

 ionic cordova plugin add cordova-plugin-advanced-http
 npm install --save @ionic-native/http

ionic cordova platform add browser INSTEAD OF ionic serve

didn’t get that error, but its performance is trouble.

so could any one help me to solve this problem in a proficient manner, I mean or by changing my code at angular or my code on the server,(or even both of them), but not with “ionic-native/http”


remove all that code you don’t need it and your htaccess is wrong. Just add this to it:

Header add Access-Control-Allow-Origin: “*”
Header add Access-Control-Allow-Methods: “GET”
Header add Access-Control-Allow-Headers: “Content-Type”

and it should work.


I did it, still not working