$http gives "not allowed by Access-Control-Allow-Origin" error in Chrome

Question

Trying to access http://www.kawa.net/works/ajax/romanize/romanize.cgi?q=%ED%96%88%EB%8B%A4?&mode=hangulis I only get the error "not allowed by Access-Control-Allow-Origin." I tried Googling this problem and found 2 suggestions, 1 saying I should start Chrome with --allow-file-access-from-files and one saying I should run the page/script on a WAAMP server. Neither of these worked. From what I gather this is due to security reasons. I'm thinking about simply making the $http request go to my server instead where I will have a PHP file that contacts the external URL instead. I guess my question is: is it necessary to do that or is there any way I can do it from the client script?

Answer 1

In an attempt to secure them from cross site scripting attacks, browsers have a built in security feature that prevents javascript from making HTTP (a.k.a AJAX) requests to URLs that are not within the same domain as the originally requested HTML page.

[In particular Chrome restricts any HTTP request when the original HTML file was received from the local file system (i.e. file:///...). As you state you can turn this off with the --allow-file-access-from-files option, or fix it by always loading your page from a web server rather than directly from the file system.]

This turns out to be rather restrictive, since there are a number of valid cases where your javascript application would want to access a web service provided by a 3rd party, which is located on a different domain. In your case you want to access a service that will romanize Korean Hangul characters.

So there are a number of ways around this restriction:

Proxy On Your Servery

The first is to provide a proxy service on your own server that will pass on the request to the 3rd party service and then return it to the browser. The browser is making a request to the same server (i.e. domain) from where it got the original HTML and so is happy.

JSONP

The second is to use a hack, such as JSONP (http://en.wikipedia.org/wiki/JSONP), which involves dynamically adding a new script tag to your HTML that will load up a new JavaScript file and execute it. You have to configure the server to wrap up the data you requested in a call to a function that is provided by your application in the browser to unwrap the data and use it. This is supported by AngularJS $http service using the .jsonp method: http://docs.angularjs.org/api/ng.$http#jsonp. Take a look at the example at the bottom of the page for more information.

CORS

The final, and most sophisticated method is to take advantage of a standard called Cross Origin Resource Sharing (CORS) : http://en.wikipedia.org/wiki/Cross-origin_resource_sharing. This is a standard provided in most browsers now where the browser is able to negotiate with a server hosting a resource on a different domain to agree that certain data can be returned. It needs no changes in the client application, and as such is fully supported for $http, but it requires you to set up the server to be able to respond appropriately. I guess that the service you are referring to is not supporting this. By the way, when CORS is in operation, you will see a number of extra OPTION requests being sent to the server. This is part of the negotiation mechanism and is perfectly normal.