Cors enabled but Still got this "Origin has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present "

Question

I'm attempting to redirect the browser from the backend, but getting this cors error every time. In the backend, I used the CORS package, however, it appears that it did not work.

Here is client site of the code

useEffect(() => {
  async function getData() {
    try {
      // The params get from the url.
      const {
        data
      } = await axios.get(`http://localhost:5000/${url}`);
      setDestination(data);
    } catch (error) {
      setError(error.message);
    }
  }
  getData();
}, [url]);

useEffect(() => {
  if (destination) {
    window.location.replace(destination);
  }
}, [destination]);

Here is server site of the code

// app.js
const express = require("express");
const cors = require("cors");
const app = express();
app.use(express.urlencoded({
  extended: false
}));
app.use(express.json());
app.use(cors());

//redirect controller
exports.redirect = asyncErrorHandler(async(req, res, next) => {
  const shortUrl = await urlSchema.findOne({
    shortUrl: req.params.shortUrl
  });
  if (!shortUrl) {
    return next(new ErrorHandler("Invalid URL", 404));
  }
  const url = shortUrl.fullUrl;
  res.redirect(url);
});

Answer 1

The server side code you've shown us, while CORS enabled, redirects to another URL.

When redirecting both the redirect response and the response to the subsequent request must grant permission with CORS.

You can't trick the browser into giving your JavasScript access to http://third-party.example.com/ (which isn't CORS enabled) by making a request to http://mine.example.net/ (which is) and redirecting to http://third-party.example.com/ .