Angular 4 Http request with codeigniter API error with CORS, cannot access API function


I have api on localhost (xampp) / codeigniter and im trying to access it via angular 4 and the browser keeps showing this error in the console. api works fine in postman.


Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).


Failed to load No
‘Access-Control-Allow-Origin’ header is present on the requested
resource. Origin ‘http://localhost:4200‘ is therefore not allowed

I have tried changing API url to localhost and as well but didn’t work. I am a beginner developer so pardon me if im missing something.

Service function in Angular 4

    return this.http.get('')

API function in codeigniter

function get_alltasks_get()
            $result = $this->todo_model->get_alltasks();

            if ($result) {
                $this->response($result, 200);
            } else {
                $this->response("No record found", 404);



Browsers send specific HTTP headers for cross-site requests
initiated from within XMLHttpRequest or the Fetch API. It
also expects to see specific HTTP headers sent back with cross-site

An overview of these headers, including sample JavaScript code that
initiates requests and processes responses from the server, as well as
a discussion of each header, can be found in the HTTP Access Control
article and should be read as a companion article to this

and should be read as a companion article to this one. This
covers processing Access Control Requests and
formulating Access Control Responses in PHP.

If you don’t have access to configure Apache, you can still send the header from a PHP script. It’s a case of adding the following to your PHP scripts:

header("Access-Control-Allow-Origin: *");

Answered By – M0ns1f

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published