Access-Control-Allow-Origin不允许使用的URL

Question

I am trying to implement OAUTH for accessing Flickr APIs. My AJAX call to flickr.com keeps failing.

Sample Error Message:

XMLHttpRequest cannot load http://www.flickr.com/services/oauth        /request_token?oauth_callback=oob&oauth…signature_method=HMAC-SHA1&oauth_timestamp=1368375405647&oauth_version=1.0. Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin. 

Initially I used chrome and read the html file as file://path. I used to get the error 'null not allowed by access-control-allow-origin'. I solved this problem by copying the html file to 'local IIS server', 'local python webserver' and then a 'remote webserver'. I created python web server using > python -m http.server 8080'

I realize my cross browser call to flickr.com using XMLHttpRequest is failing. I tried by various solutions suggested in this forum:

1. Using newer Chrome 26.0.1410.64 m, which I guess supports CORS
2. I launched chrome with --disable-web-security
3. I created a web server using python -m http.server 8080 on local machine and then on a remote machine and copied the html file to the site
4. I copied file to a local MSFT IIS server
5. I defined URL in etc/hosts file to avoid numeric IP

I still get the same error (with relevant URL in the error message)

code clipping:

urlString="http://www.flickr.com/services/oauth/request_token?"+
        "oauth_callback="+"oob"+'&'+
        "oauth_consumer_key="+consumerKey+'&'+
        "oauth_nonce="+nonce+'&'+
        "oauth_signature="+esignature+'&'+
    "oauth_signature_method="+macAlgorithm+'&'+
        "oauth_timestamp="+timeStamp+'&'+
        "oauth_version=1.0";


$.ajax({
   url: urlString,
   success:function(data){
    alert(data);
  }
});

Answer 1

In order to CORS work, both ends must enable it.

The first end is the browser , and, as you are using Chrome 26.*, yours is ok.

The second end is the server :

Before making a GET request to a domain different than the one the page is on, the browser sends an OPTIONS request to that domain. In response to this request, the server should include some headers that tell if a cross-domain request ( GET , POST or other) is allowed.

One of those headers is Access-Control-Allow-Origin .

So when you run your page from your file system ( file:// "protocol"), the OPTIONS means something like "Flickr, can I make a cross-domain call to you? I'm calling from null " . Flickr does not recognize that domain as allowed and returns the error you are getting.

Same way, when you run your page from your local server, the OPTIONS says "(...) I'm calling from localhost:8080 " . Flickr does not recognize that domain as allowed as well.

The solution:

I don't know the Flickr oauth service, but I know that, as any other service, to make a CORS call to it, the page must be in a domain allowed by it. From your tests, I'm guessing Flickr does't allow many other domains.

But... an alternative to CORS is JSONP. I did a little research, Flickr oauth seems to support it.

Check this page for details: http://www.flickr.com/services/api/explore/flickr.auth.oauth.getAccessToken There's another question talking about that specific subject: Is JSONP supported in the new Flickr OAuth API?

About JSONP, this can get you started: How to make a JSONP request from Javascript without JQuery?

Answer 2

It is not possible to implement Oauth 1.0 through just javascript without any server side script. Since the flickr's new authentication process is based on Oauth 1.0a. You got to use a server-side script.

I tried to send the token request using JSONP in FireFox with CORS on(using a third-party add-on) and it worked fine. But without using any add-ons, it's not possible as the response from flickr is in text format(not in a JSON format) and the request fails.

You can either use server-side code for token request. OR Use the deprecated flickr API for authentication.