Unable to connect to 3rdparty app

Jonathan Duane
Jonathan Duane used Ask the Experts™
on
Hi Guys,

We are having an issue with trying to connect to a 3rd party application from our website

We  have tried sending requests to the Azpiral sandbox server using Ajax GET and POST methods but i am getting a CORS error access control allow origin not present. CORS is installed on our domain https://ohehirsstudents.ie/.
Azpiral sandbox url for testing: http://sandbox.azpiral.com/PBPartnerWS/PBPtnrServices_1_11.asmx
WSDL file and docs are present in the attached Sligo IT zip file.

I can provide if really nescessary, i have spoke to their support and they are telling me that they hav enever seen an issue like this
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Author

Commented:
Their server is not accepting our request of data. I think it needs to be requested in some other way?

Commented:
Use Fiddler to capture the request attempt and post it here with the credentials removed.
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
CORS is a system put in place to prevent Cross Origin JS requests. This means that you can't make Javascript requests across different domains. Usually, when you're trying to do something like this, you write a server -side script in a language such as PHP that you host on your own server. That script makes the request to the 3rd party API using something like Curl, and then your AJAX request makes a request to your own script on your own server. This way you don't have to worry about CORS.

Commented:
CORS is a system put in place to prevent Cross Origin JS requests. This means that you can't make Javascript requests across different domains.
Ehhh.. that's partially true. CORS isn't there to prevent cross-domain JS requests, it's there to manage them.

By default, browsers don't allow cross-domain scripting. Let's say that one day you wake up, you go log into Facebook, then navigate over to some blog like www.someguysblog.com. Years ago (before CORS was around), the owner of that blog could write a Javascript snippet that would go and start posting whatever he wanted using YOUR Facebook account because you were still logged into Facebook and there wasn't any reason that Facebook wouldn't allow that Javascript to run.

So CORS came around to block all cross-domain scripting by default. So even if someone tried to write a snippet like that, all major browsers would see the attempt and stop it.

Of course, there were always legitimate reasons to allow cross-domain JS to run sometimes. So CORS also introduced a system of custom HTTP headers so two sites could mutually agree to allow one to access the other.

It's important to recognize that CORS isn't just a one-sided thing. If it were, then www.someguysblog.com could simply add some headers to HIS requests and then still access your Facebook account with cross-domain JS. So to make CORS work, not only does the sender have to identify the server it's coming from, but the remote server ALSO has to specify what domains it allows. If the remote server's list of allowed domains doesn't include the one you're coming from, then the cross-domain JS attempt will fail.

So when I suggested a Fiddler capture (or you can even use your browser's built-in developer tools - hit F12), it was so we could see the headers of the AJAX request and the headers coming back from the Azpiral sandbox server, and see if the outbound AJAX request identifies itself with a:
Origin: ohehirsstudents.ie

Open in new window

...header, and if the Azpiral server comes back with a header such as:
Access-Control-Allow-Origin: *

Open in new window


I do see that on your site, you have this header:
HTTP/1.1 200 OK
Server: nginx
Date: Mon, 02 Sep 2019 16:01:28 GMT
Content-Type: text/html; charset=UTF-8
Connection: keep-alive
Vary: Accept-Encoding
X-Pingback: https://ohehirsstudents.ie/xmlrpc.php
Link: <https://ohehirsstudents.ie/wp-json/>; rel="https://api.w.org/", <https://ohehirsstudents.ie/>; rel=shortlink
Access-Control-Allow-Origin: *
X-XSS-Protection: 1; mode=block
X-Content-Type-Options: nosniff
X-Nginx-Cache-Status: MISS
X-Server-Powered-By: Engintron
Content-Length: 59870

...but that is the header for the RECIPIENT server. In other words, you're allowing ANY remote site to access YOUR site via cross-domain Javascript. This image might help explain how Origin vs. Access-Control-Allow-Origin headers work:
2019-09-02_10-12-37.jpg
That's not usually a good thing, so I would suggest turning that header off or setting it to your own domain.

So to make CORS work between you and Azpiral, the setup needs to look like this:
2019-09-02_10-20-46.jpg
Now, all that said, one thing you should be aware of is that AJAX is client-side, which means that all data sent and received is completely visible to the end user (anyone can hit F12 and turn on Developer Tools and look at the request/response data). So even though you CAN set up CORS properly to perform cross-domain JS, it is often a good idea to use a server-side script the way that Chris suggested. That way, your API keys and any sensitive data are all executed from the safety of the server, and you can choose what to do with that data.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial