Angular and CORS once and for all - angularjs

Question

I have been struggling with this for quite a while now, and other than decided that I hate CORS with a passion, I can also confirm that the internet is full of ideas, but very few working solutions to this problem so thought I would try to get the answer once and for all.
The objective is to write angular code that can do the following.
1. Set the headers to allow for CORS.
2. Log into a CORS enabled application (in this case media wiki)
3. Make an api call to receive some JSON data.
I will even set up a test mediawiki server (with semantic media wiki) and set up a test user just for this. And who knows, if people are interested enough I'll even attempt to use the answer to write the worlds simplest CORS module for Angular.
On the server I'll do three things.
Install mediawiki and semantic Media wiki
Change the settings (in LocalSettings.php)
$wgEnableAPI = true;
$wgCrossSiteAJAXdomains = array( 'http://127.0.0.1:30004' );
$wgAPIRequestLog = "$IP/log/wgAPIRequestLog.log";
And change .htaccess to set the headers.
# CORS Headers (add this)
<ifModule mod_headers.c>
Header always set Access-Control-Allow-Origin: "*"
Header always set Access-Control-Allow-Methods "POST, GET, PUT, DELETE, OPTIONS"
Header always set Access-Control-Allow-Headers "X-Requested-With, content-type"
</ifModule>
# BEGIN WordPress (you should have this in your original WP .htaccess)
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
# CORS OPTIONS (add this too)
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]
I think this is all I need to do, however, as I have only been able to make CORS requests in angular after using a chome extension to turn of origin headers, I don't know if this will work.
In the meanwhile, if anyone has any ideas or good resources for this. Please post.
====================== And now set up =====================
So have now set up a mediawiki for this purpose
Mediawiki url 'http://v-ghost.port0.org:8081/apiwiki'
User 'whowillhelp'
Password 'InternetWill'
If you want to try an API call:
http://v-ghost.port0.org:8081/apiwiki/api.php?action=ask&query=[[Msgtype::1]]|%3FMenuName&format=jsonfm
If you haven't logged in, it will return:
{
"error": {
"code": "readapidenied",
"info": "You need read permission to use this module",
"*": "See http://v-ghost.port0.org:8081/apiwiki/api.php for API usage"
}
}
Thats all OK.
If you run the same http.get('http://v-ghost.port0.org:8081/apiwiki/api.php?action=ask&query=[[Msgtype::1]]|%3FMenuName&format=json' in angular you will get a
XMLHttpRequest cannot load http://v-ghost.port0.org:8081/apiwiki/api.php?action=ask&query=[[MsgType::1]][[Parent::Support%20Functions]]|%3FMenuName&format=jsonfm. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:30004' is therefore not allowed access.

Answer 1

That's wrong on many levels:
first, it is horribly insecure to enable CORS without limitations on any service that is even remotely public.
second, you need to set the Access-Control-Allow-Credentials header for anything that CORS is actually useful for (if it's a public API, just use JSONP). MediaWiki does this for you, when properly configured.
third, $wgCrossSiteAJAXdomains takes domain names as its arguments, not URL prefixes, so that should be $wgCrossSiteAJAXdomains = array( '127.0.0.1:30004' );.
fourth, you need to set the origin parameter in the example, ie. the correct URL is 'http://v-ghost.port0.org:8081/apiwiki/api.php?action=ask&query=[[Msgtype::1]]|%3FMenuName&format=json&origin=http://127.0.0.1:30004.

Answer 2

Thank you Quentin.
After an awful lot of faffing about, it turns out that CORS is fully controlled bt the server, and at that the web server not the application.
All that was needed (once the API was on) would have been to add the stuff to the .htaccess file. Configure Apache to read it (http.conf).
You also need to ensure that mod_headers (called headers_module when httpd -t -D DUMP_MODULES) is loaded, but it should be default with Apache 2).
And if in doubt, there is a test service:)
http://client.cors-api.appspot.com/
================= Seems to work now ===================
And as I try to be a nice person that give back. Here is the factory I wrote. Technically it requires three calls (if login is required) one if you just want to run queries. Hope it helps someone
Might we worth mentioning, Mediawiki (and potentially all CORS implementations) require you to log in twice, once for authentication, once with the token it sent earlier. Guessing this is related to building the cookie.
.factory('CORSconnectFactory', function($http, $q){
//To call any of the http calls just do
// CORSconnectFactory.login(options )
// .then(function(data)
var CORSconnectFactory = {};
var CORScredentials = {};
var urlInit;
var deferred = $q.defer();
var datareq = {
method: 'POST',
//url: 'http://v-ghost.port0.org:8081/dbfswiki/api.php?action=login&format=json',
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' //Set the coding, otherwise the server can't read you're request
}
//withCredentials: true,
/*
If you set Credentials your server gets rather picky oc CORS, more specifically Header always set Access-Control-Allow-Origin: needs to be set to exact address.
*/
//data: "lgname=APIread&lgpassword=apiread01"
}
CORSconnectFactory.initSettings = function(url, withCredentials) {
urlInit = url;
datareq.withCredentials= withCredentials;
}
CORSconnectFactory.login = function(id, password){
datareq.url = urlInit + "?action=login&format=json";
datareq.data= "lgname=" + id + "&lgpassword=" + password;
return $http(datareq)//You don't have to return this request, but it helps as it lets you use .login's promise in your code
.success(function(data) {
var results = data.login; //You might have to work around to find the right part of the structure
if ( results.result === "NoName"){
console.log("New request for Token")
} else if ( results.result === "NeedToken" ) {
console.log("Need a token this time") //Mediawiki API requires login then login with token to accept the connection.
CORScredentials = data.login
return results.result;
}
});
}
CORSconnectFactory.tokenReq = function(){
datareq.data = datareq.data = datareq.data + "&lgtoken=" + CORScredentials.token;
return $http(datareq)
.success(function (data) {
results= data.login;
CORScredentials=data.login;
console.log("And I am now " + results.result);
})
}
CORSconnectFactory.query = function(queryString) {
datareq.url = urlInit + "?action=ask&query="+ queryString + "&format=json";
datareq.data = ""; //Don't send data, it confuses the poor query (and your login details is in the token
return $http(datareq)
.success(function(data) {
var results = data.query.results;
return results;
});
}
return CORSconnectFactory;
});