POST Request works in Postman but not on Localhost

[isio]

As the title says, I made a Postman Query to an API (more specifically, the Wordpress API, and the request is to add an image to the media library) for a site that on a local server (Apache through XAMPP).
The query works fine with Postman, the image gets added to the library, but when I try the generated code with a Fetch query in my JS code, it’s doesn’t work: I get the Error code 401 Unathorized, even though I have quite literally the same token on both request (Basic Auth).

I have been stuck on that problem for a week and I’m getting desperate, the only thing that could pose problems from what I see is that the JS Query has cookies (I can’t figure out how to remove them though).

Any insights? Thanks.

What I have tried:

• Using the Basic auth token used in the JS code in Postman, Works on Postman, not JS
• Using the Basic auth token used in Postman in JS, same error
• Added these lines to my .htaccess file (located in the root directory of my local Wordpress installation) to make sure that the Authorization header wasn’t getting stripped in the JS request:

RewriteCond %{HTTP:Authorization} ^(.*)
RewriteRule .* - [e=HTTP_AUTHORIZATION:%1]

• Setting the cookie request header to Null with myHeaders.remove("Cookie");, doesn’t seem to change the header though.

Here’s my fetch request in JS:

const userName = 'myUser';
const passWord = 'appPasswordForSaidUser';
const token = "Basic " + btoa(userName + ":" + passWord);
const file = document.getElementById("imageLocalImport").files[0];
const fileContent = fileReader.result;

var myHeaders = new Headers();
myHeaders.append("Content-Disposition", "attachment; filename=" + file.name);
myHeaders.append("Content-Type", "image/jpeg");
myHeaders.append("Authorization", token);

var requestOptions = {
method: 'POST',
headers: myHeaders,
body: fileContent
};

fetch("https://localhost/wordpress/?rest_route=/wp/v2/media", requestOptions);

[michaelderekjones (Mike Jones)]

Isn’t it “header” not “headers” in the POST request?

For the Postman sendRequest() function, its definitely “header” so I wonder if its the same for JS fetch.

Apart from that I can only recommend checking the logs.

In Postman, review the console and check what was actually sent in the body and headers.

Then compare with your fetch.

[isio]

Seems like it indeed Headers
The error that I get on my browser is:

code	"rest_cannot_create"
message	"Sorry, you are not allowed to create posts as this user."
data	Object { status: 401 }

Doesn’t really give much more information, does it?
(Said user is the only user on this Wordpress installation)

I looked at the Postman headers and the one from my Fetch Query and the only header that’s in the Postman query and not the JS one is “Postman-Token”

In case I have missed something, here is the headers for my Postman Query and the header that I got from my browser

(If you’re wondering why the tokens are different, it’s because I made two of them to see if token used in the JS would trigger and update in the database, which it doesn’t, but the one used in Postman does)

As for the body, I used the “binary” option to send my image through Postman and used the ReadAsBinaryFile() function in my JS, so um… not sure if that’s a problem.

[michaelderekjones (Mike Jones)]

Sorry, I don’t know. It would appear that the issue is related to the code (if Postman is working ok). And in particular the authorization.

But what exactly is not obvious.

Headers are meant to be case insensitive, but could you try “Authorization” with a capital “A”. (Just to rule that out).

You could try the similar code in Postman using sendRequest() to see if you get the same issue (just as a troubleshooting step).

Or use the code snippet tool to the right of your working Postman request and copy the CURL command (and try that as well).

Not sure if that certificate warning will cause any issues when running it locally. I think you have some Postman options for ignoring warning messages. (But I would hopefully expect the whole request to fail a bit more dramatically).

Not an easy one to resolve. Are there any WordPress forums that might be able to give more specific advice.

[isio]

For the Authorization header, I do set the ehader with a capital A, but it seems like the headers that set are uncapitalized.
I’ll try the sendRequest() thingy on Monday.
I’ll also try to use the cURL code snippet from Postman, instead of the fetch one (also from Postman)
I’ll try asking in some Wordpress forums as well.

Thanks for the help!

[isio]

So I had put that issue on the backburner and a colleague of mine helped me:
Instead of doing the whole process of inserting the image in the Wordpress media library in the JS code, we made use of the different functions provided by Wordpress.

Using a custom endpoint ( using register_rest_route() ) and the function media_handle_upload(), we managed to upload an image to the Wordpress media library.