Failed to load resource: the server responded with a status of 401 : React Website

Question

( https://ikgithub-finder.vercel.app/ )

this is a website im building to search github users following a react course.

im having a problem with the website not catching the response or some axios problem here.

im searching for github user and this is the response, which I didn't had in the building stage.

This is the code repo:

( https://github.com/IdanKfir/github-finder )

and this is what console.log gets from searching a user:

xhr.js:247 GET https://api.github.com/search/users?q=brad 401 asyncToGenerator.js:6 Uncaught (in promise) Ft {message: 'Request failed with status code 401', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …} code: "ERR_BAD_REQUEST" config: {transitional: {…}, adapter: Array(2), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …} message: "Request failed with status code 401" name: "AxiosError" request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …} response: {data: {…}, status: 401, statusText: '', headers: n, config: {…}, …} stack: "AxiosError: Request failed with status code 401\n at https://ikgithub-finder.vercel.app/static/js/main.e1a418f5.js:2:193546\n at XMLHttpRequest.d (https://ikgithub-finder.vercel.app/static/js/main.e1a418f5.js:2:193694)" [[Prototype]]: Error

I was trying to change the token I used from git, and the env file was uploaded so I had to delete. to be honest I thought that was the problem so I reuploaded and again the same error. Would love sending the whole codes instead of repo but it really lots of code, lucky me if you'll have the time to look for it anyways, thanks:)

Answer 1

So, soon enough I found an answer to my question:D To other people who have this problem maybe the solution will be the same; So it was the token, but the problem was this:

Send Authorization in string replace { headers: { Authorization: Bearer ${userInfo.token} } } with { headers: { "Authorization": Bearer ${userInfo.token} } }

Answer 2

I debug your code and find that inside your context/github.js your have a function of searchUser ie:

export const searchUsers = async (text) => {
  const params = new URLSearchParams({
    q: text,
  });
  const response = await github.get(`/search/users?${params}`);
  return response.data.items;
};

Here your are direactly getting the value of inside your text parameter so you don't need to user URLSearchParams just direactly pass it to your api call

  export const searchUsers = async (text) => {
  const response = await github.get(`/search/users?${text}`);
  return response.data.items;
};

and if you want to use URLSearchParams you have to pass full url to the function that i see currently you are not doing.

Let me know if this works for you otherwise we will find another way:)