CODEWITHSUNDEEP
httprestangularjssslcors
mascip
mascip

Reputation: 1367

POST request with SSL to 3rd party API, failing: "Origin http://localhost:5000 is not allowed by Access-Control-Allow-Origin."

I'm developing a website with AngularJS and Restangular, and for the first time trying to send AJAX requests to a 3rd party webservice. Plus, it uses a SSL certificate.

The request is at the end of this message. It sends back an error 0, and displays in the console:

OPTIONS https://identitysso-strongauth.betfair.com/api/certlogin Origin http://localhost:5000 is not allowed by Access-Control-Allow-Origin. angular.min.js:100

and 

XMLHttpRequest cannot load https://identitysso-strongauth.betfair.com/api/certlogin. Origin http://localhost:5000 is not allowed by Access-Control-Allow-Origin.

I know this is a CORS situation. This is the browser not wanting to go and fetch information from this server. But I don't know how to make it work.

I tried to send a similar POST request with curl and it worked. One thing I had to do with curl, was to indicate where my SSL certificates were. Ah! Writing this, I thought that Chrome might need to know where the certificates are. I added them in the Settings. There was a change. Now, the request is "Pending" and never receives any response. There is no more error message in the console.

The request is pending forever... no idea what to do. I will keep on investigating, but if someone had an idea (or even a proposal of tool I could use to investigate), that would be very welcome as I am pretty much a beginner in these matters.

-------------------------------------------------------------------------------------

And here is the request before and after setting the SSL certificate in Chrome:

Request URL:https://identitysso-strongauth.betfair.com/api/certlogin
Request Method:OPTIONS
Status Code:200 OK
Request Headersview source
Accept:*/*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8,fr;q=0.6
Access-Control-Request-Headers:x-application, accept, origin, x-requested-with, content-type
Access-Control-Request-Method:POST
Cache-Control:no-cache
Connection:keep-alive
Host:identitysso-strongauth.betfair.com
Origin:http://localhost:5000
Pragma:no-cache
Referer:http://localhost:5000/
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.76 Safari/537.36

and after:

Request URL:https://identitysso-strongauth.betfair.com/api/certlogin
Request Headersview source
Access-Control-Request-Headers:x-application, accept, origin, x-requested-with, content-type
Access-Control-Request-Method:POST
Cache-Control:no-cache
Origin:http://localhost:5000
Pragma:no-cache
Referer:http://localhost:5000/
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.76 Safari/537.36

I have no idea why the request is not exactly the same, as my code is exactly the same.

Upvotes: 0

Views: 2066

Answers (1)

rzeldent
rzeldent

Reputation: 246

The thing is that your browser will not allow the httpXmlRequest object to do a request to another origin. This, indeed is CORS/SOP. This can be overcome by using a special header that is returned on the 3rd party site (preflight) that indicates to the browser that it is okay. However, i strongly doubt that betfair.com will do that for you.

I suggest to create a a proxy using the same origin (server:port) on your site that forwards requests (and retrieves the response) to this 3rd party site. This can be a simple page with code. An example can be found for .NET on http://www.west-wind.com/presentations/dotnetWebRequest/dotnetWebRequest.htm but this depend on the webserver.

Good luck,

Rene

Upvotes: 2

Related Questions