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"
</ifmodule>
# REST END
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';
}
if ( isset( $_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS'] ) ) {
$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:
if(!function_exists('ar_customize_rest_cors')){
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:
first:
// 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”