How to avoid the CORS error without telling fetch "mode: "no-cors"?

Question

My initial question (JavaScript fetch API data and use XML response as an object) was marked a duplicate of SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data using fetch, so I am asking another question, building on top of what I learned (or assume):

I have a cors error when using fetch() in JS to call an API if I don't define "{ mode: "no-cors" }". I also get the error when I run a local server! When I do define no-cors, I don't get the cors error, but the response seems to be empty.

How to avoid the cors error and get a response?

My code is the following:

async function apiCall() {
  const url =
    "https://service.runmyaccounts.com/api/latest/clients/apitest/invoices?api_key=d1bvbxkI8f1bnMBJ4sZiC-xupl4fOEzf"; // yes this is ok to publish as it is in the api documentation and just a test account
  try {
    const response = await fetch(url, {
      headers: {
        "Content-Type": "text/xml"
      }
    });
    const data = await response.text();
    console.log(data);
    //return data;
  } catch (err) {
    console.log(err);
  }
}
apiCall();

The key is attached as query string @epascarello and when you copy-paste the url in your browser, you can see it works — codingforworlddomination, Jan 21 '20 at 15:28
It was just a comment, has nothing to do with api key. I am just saying, you need to set it. There is no work around. — epascarello, Jan 21 '20 at 15:29
@epascarello I also tried passing the key not as query string but by adding "X-API-Key": "d1bvbxkI8f1bnMBJ4sZiC-xupl4fOEzf" to the header, but without success. What do you suggest exactly? — codingforworlddomination, Jan 21 '20 at 15:40
@sunyamare Read this post carefully. It explains CORS and various solutions or workarounds: https://stackoverflow.com/questions/35553500/xmlhttprequest-cannot-load-xxx-no-access-control-allow-origin-header — , Jan 21 '20 at 15:45
The KEY was a joke. It has nothing to do with it. Why can you not set the "no-cors" ? — epascarello, Jan 21 '20 at 15:55
@epascarello that is covered in my first question (https://stackoverflow.com/questions/59842053/javascript-fetch-api-data-and-use-xml-response-as-an-object) - I was thinking the same :) — codingforworlddomination, Jan 21 '20 at 20:30

score 0 · Answer 1 · answered Jan 21 '20 at 15:29

0

It seems to be hacked but... working: Using fetch with proxy

var proxy_url = 'https://cors-anywhere.herokuapp.com/';
var main_url = 'https://service.runmyaccounts.com/api/latest/clients/apitest/invoices?api_key=d1bvbxkI8f1bnMBJ4sZiC-xupl4fOEzf';

fetch(proxy_url + main_url)
    .then(response => response.text())
    .then(data => console.log(data));

answered Jan 21 '20 at 15:29

Tân

1
15
56
102

Proxy URL maybe allowing all the domains to access the resource? – AZ_ Jan 21 '20 at 15:32
Its equiv to turn off cors – Estradiaz Jan 21 '20 at 15:32
the Proxy URL sends your request through to a node process which doesn't make a request from a particular domain – TKoL Jan 21 '20 at 15:33
1

I would not call this "equivalent" to turning off CORS. You're now going through an untrusted third-party server, not directly to the target machine. – Jan 21 '20 at 15:39
With the mode "no-cors" it doesn't work, unfortunately. Using the cors-anywhere proxy it works, but as @Amy rightfully points out, this is an untrusted third-party server. Eventually, I'm planning to call confidential data from this API with another user and key. Wondering how else to solve this issue ... – codingforworlddomination Jan 21 '20 at 15:42
2

@sunyamare The CORS headers must be set by the target resource; or you can write your *own* proxy. That's all this heroku app is: it's an app that sets the proper CORS headers so your browser will permit the response. – Jan 21 '20 at 15:43
@AZ_ I'm not sure but you can try it yourself – Tân Jan 21 '20 at 15:47
@TKoL Yes. I don't have the key to unlock the door but I can still enter the room from *the window* – Tân Jan 21 '20 at 15:49
@sunyamare you don't have to put it through another server to use that code. He has his repo here, which you can look at: https://github.com/Rob--W/cors-anywhere/ And you can install it on your own server and run it through there so you're sure nobody is doing anything with the data you send – TKoL Jan 21 '20 at 16:58
Awesome, thank you @TKoL !! – codingforworlddomination Jan 21 '20 at 20:33

How to avoid the CORS error without telling fetch "mode: "no-cors"?

1 Answers1