How to get the request's headers?

[sangdth]

How can I get the request headers from frontend? The documentation does not show how to have it.

[jeremydaly]

The api interface works like Express. The request headers are available via .headers on the Request object. E.g. req.headers.

[sangdth]

Thanks jeremydaly.

So far it always shows undefined value. Do I need to do anything in order to see the headers? If I added the credentials: include on the fetch the request will be failed. Is the cors setup required here?

I also think about the option that maybe the client does not HAVE headers at all while making requests. I will double check and get back to this.

[dougmoscrop]

You should not need to do anything to see the headers, you can test this with a simple route that console.logs them, and use the Cloud Dashboard Interact feature to call it - as for CORS, if you're calling this API from a frontend hosted elsewhere, yes you will need to configure CORS! Can you share more about what your application looks like?

[sangdth]

Thank you dougmoscrop for informative comment. I'm building a Nextjs app, and recently I try to use a fetch wrapper to make requests to serverless function. I think because I don't include the headers in the fetch configs.

The wrapper:

async function fetchWrapper<T>(path: string, config: RequestInit): Promise<T> {
  try {
    const request = new Request(path, config);
    const response = await fetch(request);

    if (!response.ok) {
      const errorMessage = `${response.status} ${response.statusText}`;
      throw new Error(errorMessage);
    }

    return await response.json();
  } catch (err) {
    throw new Error('Something wrong at fetchWrapper');
  }
}

export async function post<T, U>(
  path: string,
  config?: Partial<RequestInit> & { body: T },
): Promise<U> {
  const init = {
    method: 'post',
    body: JSON.stringify(config?.body ?? {}),
    ...config,
  };
  return await fetchWrapper<U>(path, init);
}

The call:

const response = await post(CHATBOT_URL, {
    body: message,
    credentials: 'include',
});

[eahefnawy]

@sangdth yeah it doesn't seem that you have any headers in your request. Would this call work?

const response = await post(CHATBOT_URL, {
    body: message,
    credentials: 'include',
    headers: {
      ContentType: 'application/json'
    }
});

[dougmoscrop]

Where is the next.js app being served from?

[sangdth]

@eahefnawy Hei thanks for quick response, sorry I was in meetings. The credentials include cause the CORS blocked me

Access to fetch at 'https://secure-data-*****.cloud.serverless.com/chatbot' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

Remove it will make it works. And the headers is there. Thanks.

@dougmoscrop The Nextjs is running on localhost, and deployed to Vercel. Have not tested on production yet.

But I think it works as expected now. Thanks all for your nice support! <3