0

I want to change an API call (external source, no chance to change something on the API side) from PHP to Javascript (Learning purposes).

Because of the cross-origin, I use fetch(). When I run my script, I get an Unexpected end of input error and can't figure out why.

function postData(url = '', data = {}) {
  var headers = new Headers();
  headers.set('Authorization', 'Basic ' + window.btoa("user" + ':' + "pass"));
  return fetch(url, {
    method: 'POST',
    mode: 'no-cors',
    cache: 'no-cache',
    credentials: 'include',
    headers: {
      'Content-Type': 'application/json'
    },
    redirect: 'follow',
    referrer: 'no-referrer',
    body: JSON.stringify(data),
  }).then(response => response.json()).catch(error => console.error(error));
}

postData('https://www.api-endpoint.com/cat1/api/search?', {
  "searchID": "710",
  "isTagged": true
}).then(data => console.log(JSON.stringify(data))).catch(error => console.error(error));

How can I identify the problem with this code? It seems the Authorization is okay. I implemented the search parameters (searchID and isTagged) as described on the manual from the API Dev.

Thanks in advance!

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
youwhatmate
  • 71
  • 8

1 Answers1

4

You said mode: 'no-cors', which disables everything which requires CORS permission.

Since reading data across origins requires CORS permission, there is no data.

Trying to parse an empty string as JSON results in the unexpected end of input because the input ended before there was any JSON.

(Note that other things which require CORS permissions, and which you are trying to do, include setting the content-type to JSON and including credentials).

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • When I enable CORS, I get the error ```Àccess to fetch at 'api.com' from origin 'localhost:80' has been blocked by CORS.``` I guess the API server does not allow cross origin – youwhatmate Aug 30 '19 at 12:54
  • 1
    @youwhatmate — So the server isn't using CORS to grant you permission. https://stackoverflow.com/a/35553666/19068 – Quentin Aug 30 '19 at 12:55
  • Okay, that I understand. But when I enable ```mode: 'cors'```I get this error. I tried the browser extension, jsonp and the other solution. I doesn't work... – youwhatmate Aug 30 '19 at 12:59
  • 1
    You can't fetch data across origins without CORS. You definitely need a proxy on your same origin. – MarcoS Aug 30 '19 at 13:03
  • 1
    "I tried the browser extension" — The answer I pointed you to says: "They also tend to work only with simple requests (failing when handling preflight OPTIONS requests).". Since you are doing plenty of stuff that needs a preflight, that is to be expected. – Quentin Aug 30 '19 at 13:03
  • 1
    "jsonp" — Which says "Bob could also provide the data using a hack like JSONP" … did you ask if the API you were using supported JSONP? And since you can't (a) make a POST request (b) set credentials or (c) set headers with JSONP … it wouldn't be remotely equivalent anyway. – Quentin Aug 30 '19 at 13:04
  • 1
    "the other solution" — Which other solution? The proxy? Not writing a web app? Talking to the people running the service you are trying to POST to? – Quentin Aug 30 '19 at 13:04
  • The other solution is talking to the persons running the API. They dont give CORS permission. No, i did not try the proxy solution. I will get to that i guess. – youwhatmate Aug 30 '19 at 13:11
  • 1
    Just keep in mind that since you are passing a username and password these will either be (a) **yours** and exposing them to every visitor to your website is likely to be a bad idea or (b) **theirs** and having them send to your server imposes legal obligations on you to protect them – Quentin Aug 30 '19 at 13:14
  • Thank you for the hints. I guess I stick to PHP for this API project. I marked your answer as the correct one – youwhatmate Aug 30 '19 at 13:18