Cross-Origin Request Blocked:

Question

I have a mobile app that uses an API to authenticate a user via a login form.

This has been working fine up-to today.. and now today when I attempt to login I get the following message in the console log:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://myapp.local/myAppApi/V1/appLogin. 
This can be fixed by moving the resource to the same domain or enabling CORS.

Obviously I need to enable CORS from reading the message, within my myApiController.php I have the following code within my Yii application that I believe should be doing this:

protected function _renderJSON($status = 200)
{
    $statusCodeMessage = $this->_getStatusCodeMessage($status);
    header("HTTP/1.1 {$status} {$statusCodeMessage}");

    // allow for Cross Origin Resource Sharing
    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE");
    header("Access-Control-Allow-Headers: Authorization");
    header('Content-type: application/json');
    echo CJSON::encode($this->jsonArray);

    foreach (Yii::app()->log->routes as $route) {
        if ($route instanceof CWebLogRoute) {
            $route->enabled = false; // disable any weblogroutes
        }
    }
    Yii::app()->end();
}

Could anyone assist on how I can fix this? The app is made with the cordova framework and the API it connects to works via an PHP app built using Yii.

Any advice would be appreciated

-- UPDATE -- I have added the following to my htaccess to no joy however

<ifModule mod_headers.c>
 Header set Access-Control-Allow-Origin: *
 Header set Access-Control-Allow-Headers: Authorization
 Header set Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE
</ifModule>

-- UPDATE -- I've come across this link which looks useful https://gist.github.com/sourcec0de/4237402

Is the problem happening on a real device, or only when testing locally? — Nicolas R, Aug 20 '14 at 09:32
I am working on my local setup (WAMPServer etc..) would the virtualhosts information be of any use to you? — Zabs, Aug 20 '14 at 09:34
Did you try to setup CORS like this on your wamp server: http://stackoverflow.com/questions/20442628/cors-jquery-ajax-request But for your real implementation, you should not have the problem, it's only when you debu locally that you got it right? — Nicolas R, Aug 20 '14 at 09:36
I unfortunately only built the PHP API so don't have a full understandings of the html5 app, afaik the headers i added should enable CORS as this has been working at somepoint (still getting my head around this stuff) — Zabs, Aug 20 '14 at 10:19
@NicolasR if i run this 'app' through an emulator so it runs as per it should do on an iPhone for instance would I still get this cors issue? — Zabs, Aug 20 '14 at 11:36
On the emulator you may have it, because it is still your computer trying to communicate with your computer — Nicolas R, Aug 20 '14 at 11:47

score 14 · Accepted Answer · answered Dec 03 '14 at 06:12

Try adding below code in API controller constructor, it works for me.

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: PUT, GET, POST");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");

Cross-Origin Request Blocked:

1 Answers1