I am working in a tiny project in react and express.js
the express.js code (Backend)
app.post('/api/search', (req, res) => {
//
res.setHeader("Access-Control-Allow-Origin", "*");
axios.get("[REDACTED]" + req.body.searchtxt + "&limit=100").then((response) => {
res.json({status: "ok", result: response.data})
})
})
and here the front-end
function SearchPage() {
const { searchText } = useParams()
const [SearchTxt, setSearchTxt] = useState(searchText)
useEffect(()=>{
fetch('http://localhost:8080/api/search', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
mode: 'cors',
body: JSON.stringify({searchtxt: searchText})
}).then((res) => {
res.json().then((resjson) => {
console.log(resjson)
})
})
},[])
}
but it shows this :
Access to fetch at 'http://localhost:8080/api/search' from origin 'http://localhost:3000'
has been blocked by CORS policy: Response to preflight request doesn't pass access control
check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an
opaque response serves your needs, set the request's mode to 'no-cors' to fetch the
resource with CORS disabled.
I've tried with Access-Control-Allow-Origin set to localhost:3000 but it don't work
Browser sends OPTIONS preflight requests by default when sending a request. So, you should send Access-Control-Allow-Origin header for that request as well.
The easiest solution is to use cors middleware package. You can use it like this:
const cors = require('cors');
app.post('/api/search', cors(), (req, res) => {
res.setHeader("Access-Control-Allow-Origin", "*");
axios.get("[REDACTED]" + req.body.searchtxt + "&limit=100").then((response) => {
res.json({status: "ok", result: response.data})
})
})