API request URL is changing automatically

Question

In react.js I'm using axios from communication with server. every API is working well except one. my URL in code is https://localhost:44338/api/Register/Register but in browser network it looks like this https://localhost:44338/api%E2%80%8B%E2%80%8B/Register%E2%80%8B/Register. My question is why is the URL is changing? See code below:

import axios from "axios";

const url = "https://localhost:44338/api";

const makeRequest = async (method, path, data, headers) => {
let response;
const defaultErrorMessage = "Sorry! your request has been declined.";

let requestInfo = {
    method,
    url: `${url}${path}`,
    headers: {
        'Content-Type': 'application/json'
    }
}

if (data) {
    requestInfo.data = data;
}

if (headers) {
    requestInfo.headers = headers
}

await axios(requestInfo).then(res => {
    if(res.status === 200 || res.status === 201) {
        response = res;
        response.success = true;
    }else {
        response.success = false;
        response.message = defaultErrorMessage;
    }
}).catch(err => {
    if(err.response) {
        response = err.response;
        response.message = err.response.data || defaultErrorMessage;
    }else {
        response = {
            message: defaultErrorMessage
        };
    }
    response.success = false;
});
return response;
}

export { makeRequest };

this is where I`m calling this function

const registerRequest = async (payload) => {
return await makeRequest("POST", "/Register/Register", payload);
}

here is response which I find interesting in this case

 {
   data: "",
   success: false,
   status: 404
   config: {
     baseURL: "https://localhost:44338/api",
     url: "/Register/Register"
     //ect
   },
   request: {
     responseURL: "https://localhost:44338/api/%E2%80%8B%E2%80%8B/Register%E2%80%8B/Register"
   //ect
   }
 }

P.S. I tested fetch instead of axios but result is same – lukasimonishvili Aug 12 '21 at 21:34 — lukasimonishvili, Aug 12 '21 at 21:34
I also checked axios interceptor and url is fine – lukasimonishvili Aug 12 '21 at 23:15 — lukasimonishvili, Aug 12 '21 at 23:15

score 0 · Answer 1 · answered Aug 12 '21 at 20:25

0

The path you pass to your function becomes URL-encoded. I don't really understand why. But, you could try a different approach by creating a custom axios instance and setting url as base url and then just passing the path to the axios instance for your requests.

const instance = axios.create({
  baseURL: `${url}`,
  // other options you want
});

And then, make your request, instance.request(options). Also, note that you don't need to use await in your function as you're already using then and catch methods to handle the Promise.

answered Aug 12 '21 at 20:25

tobihans

363
3
10

I did everything as you told me but result is same. other requests is working well except this one – lukasimonishvili Aug 12 '21 at 20:52
I guess problem is in path not in baseURL, but idk why – lukasimonishvili Aug 12 '21 at 20:54
When I tried to decode the url, I end up with `https://localhost:44338/api//Register/Register`. So the problem is the two **`//`** after "api". But, I'm wondering how this happens. – tobihans Aug 13 '21 at 09:50

score 0 · Answer 2 · answered Aug 12 '21 at 20:53

You don't need to use try/catch and async/await. Axios use promises to handle the request (more information to understand how it works here).

Here is an example :

axios({
  method: 'get',
  url: 'http://localhost/',
})
  .then(function (response) {
    /..../
  });

don't forget to use a string for instance configuration (method and URL). I have a doubt about the URL declaration... Are you sure it's correct? Maybe you can try to build the full URL before you use it, and plan when path is undefined.

More information to how build Axios requests here

score 0 · Answer 3 · answered Aug 13 '21 at 10:34

0

There seams to be the special (invisible) characters at the end of each word.. try to delete it with backspace or just retype manually full link rather then copy/paste it.

the same solution as: https://stackoverflow.com/a/13822119/1565790

answered Aug 13 '21 at 10:34

GRigol

393
4
7

Yeah, I already fixed it, but your answer is correct. that was the problem – lukasimonishvili Aug 17 '21 at 19:22

API request URL is changing automatically

3 Answers3