CORS policy Error

Ionic Framework
1

When run the app shows an Error

Access to XMLHttpRequest at ‘https://www.pamz.co.jp/api/process_api.php’ 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.

access_provider.ts

export class AccessProviders{

    server:string='https://www.pamz.co.jp/api/';

    constructor(private http:HttpClient

        ) { }

        postData(body,file){

            let headers=new HttpHeaders({

            'Content-Type':'application/json; charset=UTF-8'

            });

            let options= { 

                headers : headers

            }

            return this.http.post(this.server + file , JSON.stringify(body),options)

            .timeout(590000)

            .map(res=>res);

        }
   }

process_api.php


header('Access-Control-Allow-Orgin: *');
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS");
header("Access-Control-Allow-Headers: Origin,Content-Type,Authorization,Accept,X-Requested-With,x-xsrf-token");
header("Content-Type: application/json;charset=utf-8");
include "config.php";
$postjson=json_decode(file_get_contents('php://input'),true);
$today=date('Y-m-d H:i:s');

if($postjson['aksi']=="process_register"){
  
          $checkmail=mysqli_fetch_array(mysqli_query($mysqli,"SELECT email_address FROM register WHERE email_address='$postjson[email_address]'"));

          if($checkmail['email_address']==$postjson['email_address']){
            $result=json_encode(array('success'=>false,'msg'=>'Email Already Registered'));
          }else{

                $password=md5($postjson['password']);

                $insert = mysqli_query($mysqli,"INSERT INTO register SET 
                your_name ='$postjson[your_name]',
                email_address ='$postjson[email_address]', 
                password ='$password', 
                confirm_pass ='$postjson[confirm_pass]',
                created_at  ='$today'
                
                ");
                if($insert){
                    $result=json_encode(array('success'=>true,'msg'=>'Register Successfully'));
                }else{
                    $result=json_encode(array('success'=>false,'msg'=>'Register error'));
                }

          }
          echo $result;
}

How to solve…Any one Help…

2

What i use with Nodejs:

const corsOptions = {
  allowedHeaders: [
    'Authorization',
    'Origin',
    'X-Requested-With',
    'Content-Type',
    'Accept',
    'X-Access-Token'
  ],
  methods: 'GET,HEAD,OPTIONS,POST,PUT',
  origin: [
    'capacitor://localhost',
    'ionic://localhost',
    'http://localhost',
    'http://localhost:4200', // Angular
    'http://localhost:8100', 
    'http://localhost:8101' // For Second Ionic
  ],
  credentials: true,
  preflightContinue: false,
  optionsSuccessStatus: 200
};

// Cors
app.use(cors(corsOptions));

P.S. Default is 8100. If you run a second project same time it uses 8101 as in your situation.

3

i am new one for ionic…where i use this code

4

It’s not about Ionic. It’s about your backend. I use it in NodeJs so you can not copy paste. You should implement it in your backend ( process_api.php). Set origins that will be allowed.

In fact you have a setting but seems like it’s misspelled:

header(‘Access-Control-Allow-Orgin: *’);
->
header(“Access-Control-Allow-Origin: *”);

5

Ok Thankyou i will Check…