-3

I'm getting the following error using AJAX to call an API on UPS

XMLHttpRequest cannot load https://wwwcie.ups.com/rest/Ship. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow- Origin' header is present on the requested resource. Origin 'http://localhost:63786' is therefore not allowed access.

AJAX Call:

$.ajax({
     url: "https://wwwcie.ups.com/rest/Ship",
     type: "POST",
     dataType: 'json',
     crossDomain: true,
     contentType: 'application/json',
     data: JSON.stringify(message),
     success: function (result) {
              //code to execute on success
     }
     error: function (result) {
              //code to execute on error
     }
})

I have no control over the API server so I cannot modify the headers being sent back. I've tried JSONP, changing the headers I send, and a number of other solutions to no avail. I've read that making a server-side proxy could be a possible fit but I'm not sure how I would go about this. Any advice/code samples on possible solutions would be greatly appreciated. Thanks in advance.

Anthony Gargano
  • 1
  • 1
  • 2
    You need a server-side proxy. Write server code that sends that request and forwards the response. – SLaks Jun 13 '17 at 20:03
  • 1
    A proxy is your only option. And, since you didn't specify what server you're using, it's impossible to give you a specific answer. – Brad Jun 13 '17 at 20:04
  • Possible duplicate of [how to bypass Access-Control-Allow-Origin?](https://stackoverflow.com/questions/7564832/how-to-bypass-access-control-allow-origin) – Memduh Jun 13 '17 at 20:04
  • What do you mean 'you didn't specify what server you're using'. I'm attempting to do a POST to the UPS API shipping server. – Anthony Gargano Jun 13 '17 at 20:12
  • 1
    @AnthonyGargano that isn't *your* server. the proxy you will be building would need to be built on *your* server. – Kevin B Jun 13 '17 at 20:17
  • Actually, UPS api appears to support client side calls: https://stackoverflow.com/questions/40084851/how-to-solve-json-syntax-error-how-to-get-response – yezzz Jun 13 '17 at 21:04

1 Answers1

-1

What is to stop a malicious website from sending requests to your bank's web app and transferring all of your money? To prevent these types of shenanigans, if you're using a web browser, the server must explicitly state which remote origins are allowed to access a certain resource, if any.

If you need a key to access it, then CORS probably isn't enabled. You can always double check by looking at the response headers. See this:

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

So as others have already mentioned, you can get around this by making the request from your own server (where the headers don't identify it as a browser and subject to CORS limitations), and proxy it to your client side app.

Assuming you're using Node/Express, something like this should work:

const express = require('express');
const app = express();

const myHeaders = new Headers();

const myInit = { method: 'GET',
               headers: myHeaders,
               mode: 'cors',
               cache: 'default' };

app.get('/ups/stuff/stuff', (req, res) => {
  fetch('/ups/api/stuff', myInit)
    .then(response => response.json())
    .then(json => res.json(json);
});

app.listen(3000);

The native fetch API is neat because you can use it on both client and server, and it supports promises like jQuery.

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

cheesenthusiast
  • 139
  • 7