axios error when template literal in reactjs-CodePudding

I am trying to figure out error dealing with template literal in reactjs(tsx)

export const Features = () => {
  const [features, setFeatures] = useState([]);
  const [isLoading, setLoading] = useState(false);
  const [keywords, setKeywords] = useState("");

  const fetchData = async () => {
    setLoading(true);
    const result = await axios.get("http://123.123.123.123:8000/api/v1/features/?search="   keywords);
    const result1 = await axios.get(`http://123.123.123.123:8000/api/v1/features?search=${keywords}`);
    setFeatures(result1.data.results);
    setLoading(false);
  };

  ///
  const handlePageChange = () => {
    fetchData();
  };

it works totally fine when I run with result but the issue is result1 These two look totally same but when I run result1 I got a message below

Access to XMLHttpRequest at 'http://52.195.14.97:8000/api/v1/features?search=' 
from origin 'http://52.195.14.97:3000' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

xhr.js:210 GET http://23.123.123.123:8000/api/v1/features?search= net::ERR_FAILED 301

Could anybody help me figuring this out? I want to run with result1 for some reason :-(

CodePudding user response：

It seems like you are missing a / in your second url after the features keyword. I am making this assumption based on your first API url that seems to work.

Try changing this: http://123.123.123.123:8000/api/v1/features?search=${keywords}

To this: http://123.123.123.123:8000/api/v1/features/?search=${keywords}