Missing Header

How-to Discussions
1

Hi, please i’m having issues adding an authorization header while calling a REST API using fetch.

I got Missing authorization header

Below is my code for making requests to the API

function AppCloud(api, args, m, body, access_token) {
	var url = API_URL+api+"?rand="+Date.now();
	var requestData = {
		method : m
	};

	if (body !== null){
		requestData.headers = new Headers({
		    'Accept': 'application/json',
		    'Content-Type': 'application/x-www-form-urlencoded',
		    'Authorization': 'Bearer ' + access_token
		  });
		requestData.body = body; 
	}

	//console.log(JSON.stringify(requestData));

	return fetch(url,requestData).then(function(res) {
		return res.json();
	}).catch(function(msg) {
		console.log("Failed to fetch: " + url + ", msg: " + msg);
	}); 
}

I have tried the API endpoint in Postman and it worked. Please what are mine doing wrong?

2

Apparently your backend expects a different header or a differently named authorization property or different syntax for the auth header value.

The code looks fine, except maybe the requestData.body should be JSON.stringify(body).

3

Uldis wrote:
The code looks fine, except maybe the requestData.body should be JSON.stringify(body).

For the requestData.body, I’m using an encoded data using the function below:

function formEncode(obj) {
    var str = [];
    for(var p in obj)
    str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
    return str.join("&");
}
4

I don’t think that’s related to the issue at hand in any way. It’s about what your backend expects you to send from the client, and there is no way for us to help you with that; especially, not knowing what your backend is.

5

My backend is PHP (Codeigniter RestServer - https://github.com/aiamk/codeigniter-restserver)

6

You’ll need to read the docs on that repository, configure you backend as necessary, and make sure you send the exact headers it expects. Good luck!

7

Uldis wrote:

You’ll need to read the docs on that repository, configure you backend as necessary, and make sure you send the exact headers it expects. Good luck!

I’ve done that already and I believe since it’s working through POSTMAN without any hitches, then it should work with fetch too.

Thanks.

8

If it works with Postman and doesn’t work with fetch, then all you need to do is figure out what the difference between the two is. There’s nothing else we can do to help.

If you can’t figure it out, please provide a complete, minimal, ready-to-run reproduction that we can copy-paste and run to see the problem.

9

It seems I found out what could be the cause.
I log request headers for postman and fetch and below is the output.

FETCH

{"status":false,"header":{"Accept":"application/json","Content-Type":"application/x-www-form-urlencoded","authorization":"Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJlbWFpbCI6InBhcGFrYXkxOUBnbWFpbC5jb20iLCJ1c2VyX2lkIjoiMTg3IiwiaWF0IjoxNTA3MjA1MDU3LCJleHAiOjE1MDc4MDk4NTd9.yxENA7-8D-TdnkTCrZ2Vyd6mkZVXnAv3ok4-K_6s280","Content-Length":"49","Expect":"100-continue","Host":"apps.dev"}}

and POSTMAN

{"status":true,"header":{"cache-control":"no-cache","Postman-Token":"0649d8c1-bb6d-4e83-99b4-8ba0665cfac0","Content-Type":"application\/x-www-form-urlencoded","Authorization":"Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJlbWFpbCI6InBhcGFrYXkxOUBnbWFpbC5jb20iLCJ1c2VyX2lkIjoiMTg3IiwiaWF0IjoxNTA3MjAxNDc2LCJleHAiOjE1MDc4MDYyNzZ9.uxdyCQs3OrRbCG5ukAFn9Ni5G8mSJrBD9EObEoSYYXk","User-Agent":"PostmanRuntime\/6.3.2","Accept":"*\/*","Host":"apps.dev","accept-encoding":"gzip, deflate","Connection":"keep-alive"}}

From Observation Postman passes Authorization key in capitalized format while Fetch does so in lowercase case.

Is there a way to enforce the Case?

10

Now we’re getting somewhere!

I checked our fetch implementation and found this. This approach matches whatever the specification for fetch WAS a while ago, but that has changed since. Apparently we need to update our fetch implementation (logged a ticket about that).

As I see it, you now have two short-term options:

  1. Change your backend to accept lowercase header property names.
  2. Switch to using XMLHttpRequest which doesn’t seem to suffer from this issue.
11

Thanks. I already went for option 1.

Thank you.