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 :-(
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}