1

I am working on making a POST from javascript. The POST in curl looks like this:

 curl -v -H "Content-Type: application/json" -X POST --data @local.json -u username:password https://example.com

However my attempts to do this in javascript have me at a full halt.

This is what I have tried so far:

fetch('https://example.com', {
method: 'POST',
headers: {
  'Content-Type': 'application/json',
  'Authorization': 'Basic username:password')),
},
body: data
}).then(response => console.log(response))
.catch(error => console.log('Authorization failed : ' + error.message));

And many variations of this

I have also tried using XMLHttpRequest

request.open('POST', 'https://example.com', true);
request.setRequestHeader('Content-Type', 'application/json');
request.setRequestHeader('Authorization', 'Basic username:password');
request.send(data);

request.onreadystatechange = function () {
    if (request.readyState === 4) {
       alert(request.responseText);
    }
};

mostly I get this error:

... has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

So I'd add all that and then it'd tell me there needed to be set-cookies but I'm already getting that from the sever when I do a curl so wth??

So that and 415. The more I look into it the deeper the rabbit hole goes. Some help would be really appreciated here.

I've read this: No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API It just confused me even more...

Ryan Tibbetts
  • 11
  • 1
  • 1
    CORS must be supported by the *server*. You cannot use every API from inside a browser, it has to specifically allow requests from other domains. The error you're getting means the server doesn't allow this. If you don't also control the server, you have two options: a bad short-sighted one is to use a CORS proxy, a better one is to route the request over your backend (CORS doesn't apply there). –  Jan 12 '21 at 19:43
  • 1
    If you don't want to dive into the rabbit hole of CORS, you can try to keep your requests [simple](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#simple_requests) - so no using "authorization" header (you might not need it, it's not in your curl example), if you need [content-type](https://stackoverflow.com/questions/38998684/cant-send-a-post-request-when-the-content-type-is-set-to-application-json) see <- that question/answers. – James Jan 12 '21 at 19:49
  • 1
    @ChrisG I do control the server. So I need to support CORS on the server to allow this data to be sent with authentication? – Ryan Tibbetts Jan 12 '21 at 20:39
  • 1
    You need to enable CORS on the server if it's not the same as the one serving the web page that makes the request, yes. PHP for instance has a `header()` command you can use: `header("Access-Control-Allow-Origin: *");` should do it. In general you should also use the browser's dev tools (press F12) to inspect the XHR. For instance I'm pretty sure you need to send `JSON.stringify(data)` as body if you use `fetch`. –  Jan 12 '21 at 21:09

0 Answers0