XMLHttpRequest cannot load Response for preflight has invalid HTTP status code 404


#1

i have a codeigniter api and i am trying to post request with authorization header
but this not working for me and chrome console return 404 error
In Api They Call Without Authorization Header Is Working Fine
How To Set Headers For It?

ionViewWillEnter(){
   let headers:Headers = new Headers({
       'Content-Type': 'application/json',
       'Authorization': this.token
    });
    let options: RequestOptions = new RequestOptions({headers:headers});
    let params: URLSearchParams = new URLSearchParams();
    params.append('latitude','23.259933');
    params.append('longitude','77.412615');
    params.append('nearby','5');

    this.http.post(url, params, options)
             .subscribe(
               (success: Response)=>{
                console.log(success);
               },(err: Response)=>{
                 console.log(err.json());
               }
             )

}

#2

The error message is the important bit: It is doing a preflight request (OPTIONS request to your URI instead of POST) to find out if all the headers are correct, and your API responds with a 404 instead of the wanted 200. Make your API respond correctly.

(Look at your browser’s dev tool’s network panel to see the request it is making)


#3

Try the sample code or check if it’s not by passwd or ssl certificate.

import { Injectable } from '@angular/core';
import { Http, RequestOptions, Response, Headers } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

export interface IMyService {
    create(medication: any): Observable<{}>;
}

@Injectable()
export class MyService implements IMyService {

    private url: string = '/api/url';

    constructor(private http: Http) {}

    public create(data: any): Observable<{}> {
        let body = JSON.stringify(data);
        let headers: Headers = new Headers();
        headers.append('latitude', '23.259933');
        headers.append('longitude', '77.412615');
        headers.append('nearby', '5');
        headers.append('Content-Type', 'application/json');

        let options = new RequestOptions({ headers: headers });

        return this.http.post(this.url, body, options)
            .map((res: Response) => res.json())
            .catch(error => error);
    }

}


export class MyController {
    private data: any = {};

    constructor(private myService: IMyService) {
        this.data = { id: 1, name: "test" }
    }
    
    ionViewWillEnter(){
        this.myService.create(this.data).subscribe(res => res);
    }
}


#4

Hello Thanks for reply

I have check the browser network tab. Its sending Request type OPTION when i add any Authorization header. It should send POST REQUEST. Why its happening & how can i fix that.

I belive if i will be able to send POST request with header my issue will be resolve. What you think?


#5

No, that is exactly what is happening. This is a security feature of browsers and can not be turned off. Google for “CORS” to read more.

(Workaround can be to use the Service Proxies offered by Ionic CLI: https://github.com/ionic-team/ionic-cli#service-proxies)