cors wont work even if Access-Control-Allow-Origin is set to *

Question

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

When a request is deemed not to be a "simple" request the browser does a preflight request, with the OPTIONS verb. That is the one that's not being sent Allow Origin headers. Your code only adds the header when handling POST requests. Check [this question](https://stackoverflow.com/questions/7067966/why-doesnt-adding-cors-headers-to-an-options-route-allow-browsers-to-access-my) there are a few good suggestions. — James, Mar 18 '22 at 21:12

score 0 · Answer 1 · answered Mar 18 '22 at 21:22

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})
  })

})

cors wont work even if Access-Control-Allow-Origin is set to *

1 Answers1