I need help with - Cross-Origin Request Blocked

[revdave]

Hi all,

I am on a mac trying to get a result back from this code below.

On the app Postman (on mac) is works fine, However I get these errors below when pasted into a basic test html page...

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://chosenpayments.transactiongateway.com/api/query.php. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://chosenpayments.transactiongateway.com/api/query.php. (Reason: CORS request did not succeed).

Also: I have no access to the site - chosenpayments.transactiongateway.com

Q: How can I get the html page to not get *Cross-Origin Request Blocked* errors when the postman app works with no problems?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

var form = new FormData();

form.append("username", "xxx");

form.append("password", "xxx");

form.append("transaction_id", "xxx");

form.append("", "");

var settings = {

"async": true,

"crossDomain": true,

"url": "https://chosenpayments.transactiongateway.com/api/query.php",

"method": "POST",

"headers": {

"cache-control": "no-cache",

"Postman-Token": "f397621c-8738-4b3c-a137-e0fa755a04ec"

},

"processData": false,

"contentType": false,

"mimeType": "multipart/form-data",

"data": form

}

$.ajax(settings).done(function (response) {

console.log(response);

});

  </script>

[David_Powers · Accepted solution]

It doesn't work on your remote server because the request and response both need to come from the same origin (domain). It works locally because they're on the same origin.

Add this to your PHP script before any output:

header('Access-Control-Allow-Origin: *');

[revdave]

Thanks so much for your help David,

I could use some clarification...

I have no access to this credit card gateway...

https://chosenpayments.transactiongateway.com/api/query.php

so unless they have the header - header('Access-Control-Allow-Origin: *'); on there then I guess there is no way to accomplish this at this point correct?

Still curious why the Local mac app postman was able to send to the remote

https://chosenpayments.transactiongateway.com/api/query.php

and get a successful response?

[David_Powers]

I'm not familiar with Mac Postman, but CORS (Cross-Origin Resource Sharing) is a mechanism designed to allow secure transactions between applications on different servers. You're trying to use Ajax to communicate with a payment gateway. Browsers prevent Ajax requests receiving a response from a server that's on a different domain from the page that made the request. For a detailed description, see Cross-Origin Resource Sharing (CORS) - HTTP | MDN

If the payment gateway accepts Ajax requests, it's possible that the gateway is looking for a security certificate on your server. If you're testing locally, you almost certainly don't have one. Get in touch with the payment gateway to ask whether Ajax requests are permitted.