0

I know this has been asked a lot of times, but not answered well. And this shouldn't be complicated seeing as how the API is for use by anyone with a dev key.

I am trying to make a GET request to a very simple API. I can open up a web browser and enter: https://example.com/myusername/?key=myDevKeyHere&userid=1234

the remote host replies with some json like so {"userid":"1234","fname": "joe"}

Next, I create an html page with something like this javascript:

var xhr = new XMLHttpRequest(); xhr.open("GET", "https://example.com/myusername/?key=myDevKeyHere&userid=1234" , "true"); xhr.onload = function() { console.log(xhr.responseText); }; xhr.send();

and of course I get a CORS Error. ( blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.)

I understand what's going on and why I am getting the CORS Error. What I can't seem to do is find out how to properly call a remote API from my server and avoid this. I google and see lot's of people pasting the same links to CORS Documentation about how CORS works but no examples or context. (The examples I see a lot of are assuming that I am the one creating the remote API and can just add Access-Control-Allow-Origin: mySITE on the server side.)

Do I need to add some magic "xhr.setRequestHeader()" lines to the xhr Get request on my html page? Do I need to configure some Apache Directive on MY server, hosting MY page?

Some have suggested I use a proxy site for the request, some assume everyone is using node.js and tell me to use a third part library. This seems way too complicated for a simple API call. If I saw some working example of javascript to make the query, maybe things would "click" and I'd have the "ahah" moment. It seems like those with expertise with Headers and CORS have forgotten what it's like to learn this from scratch and over explain "what" and "why" about CORS leaving out the "how" and "where".

Glenn
  • 1
  • 2
  • Yet another duplicate of: https://stackoverflow.com/a/35553666/19068 (which explains the what and why) – Quentin Feb 01 '23 at 22:13
  • I've read that post several times and unless you can point to something I missed, it does not answer my question. The most relevant thing I saw was "There is nothing you can do in your client-side code that will enable CORS access to someone else's server. If you control the server the request is being made to: Add CORS permissions to it." I DO control my server, how do I add permissions to it? – Glenn Feb 01 '23 at 22:22
  • Are you sure you control that server you are making the Ajax request to? Your question said "The examples I see a lot of are assuming that I am the one creating the remote API and can just add Access-Control-Allow-Origin: mySITE on the server side" which implies you don't. – Quentin Feb 01 '23 at 22:36
  • 1
    If you *do* control it, then as the answer I pointed to says: *The specifics of how Bob sets that response header depend on Bob's HTTP server and/or server-side programming language*. and you've told us nothing about the server or server-side programming language responsible for supplying the response when the client asks for `https://example.com/myusername/?key=myDevKeyHere&userid=1234`. – Quentin Feb 01 '23 at 22:39
  • Sorry I mis-read " If you control the server the request is being made to". I only control MY server that hosts MY page, not the Server that hosts the API. I appreciate your help, Quentin but I think I'm going to abandon my ideas of using JS and turn to PHP/curl until I understand more about sending and receiving header info. – Glenn Feb 01 '23 at 22:55
  • @Glenn If the resource that you want to request isn't configured for CORS (or is but doesn't allow the Web origin of your client), you won't be able to request it from the frontend. As simple as that. An alternative, as you correctly guessed, is to consume the resource in the backend. – jub0bs Feb 02 '23 at 08:20
  • 1
    @jub0bs : This is the first time I've tried to use a remote API. I had a feeling that JS might be the wrong tool for this job and I needed someone with more experience to simply tell me that. Thank you so much! – Glenn Feb 02 '23 at 17:11
  • For future reference, I was able to query the API using one line of PHP: file_get_contents('https://example.com/myusername/?key=myDevKeyHere&userid=1234') (this comment block is hiding the https:// in front of the example.com above) – Glenn Feb 02 '23 at 18:44

0 Answers0