Только некоторые межсайтовые запросы работают с использованием npm cors ()

Question

Я создаю веб-сайт с использованием реакции (он работает на локальном хосте: 3000), который получает информацию о своем пользователе от API, который я создал на локальном хосте: 4000.Чтобы разрешить запросы между ними, мне сказали использовать пакет npm cors, чтобы разрешать запросы из разных источников туда и обратно.Я настроил cors в своем API следующим образом: app.use(cors({credentials: true, origin: true}));

В своем приложении реагирования я использовал axios для отправки и получения запросов, у меня есть один такой запрос на получение в компоненте, который получаетответ:

isLoggedIn(){
        let isLogged = false;
        Fetch("http://localhost:4000/IsLogged")
        .then((results)=> {
            console.log(results)
            isLogged = results.data
        })
        .catch((err)   => console.log(err))
        this.setState({loggedIn: isLogged})
    }
    componentDidMount(){
        this.isLoggedIn();
    }

Однако, когда я пытаюсь получить информацию о пользователе, используя этот код:

getUserDetails(){
    Fetch("http://localhost:4000/userDetails")
        .then((results)=> {console.log(results)})
        .catch((err)   => console.log(err))
  }
  componentDidMount(){
    this.getUserDetails()
  }

, я получаю этот ответ в консоли:

Access to XMLHttpRequest at 'http://localhost:3000/login' (redirected from 'http://localhost:4000/userDetails') from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Вот код на стороне сервера:

app.get("/userDetails",(req,res)=>{
  //if there is no userID associated with the session then the user hasnt logged in, redirect to login
  console.log(req.session.UserID)
  if(!req.session.UserID) {
    res.redirect("http://localhost:3000/login")
  }else{
    let userID = req.session.UserID
    connection.query("SELECT * FROM `users` WHERE id =" + userID)
    .then((rows) => res.send(rows[0]))
    .catch((err) => console.error(err))
  }
})

Возможно, это что-то глупое, поэтому я прошу прощения, если это действительно просто, любые ссылки на чтение по этому вопросу также были бы хорошими.Спасибо за любую помощь!

Answer 1

Вы можете использовать промежуточное программное обеспечение ниже на вашем сервере узлов для изменения входящих запросов.просто поместите это перед своими маршрутами, и это сделает свое дело ..

app.use(function(req, res, next) {
  // Website you wish to allow to connect
  res.setHeader("Access-Control-Allow-Origin", "*");
  // Request methods you wish to allow
  res.setHeader(
    "Access-Control-Allow-Methods",
    "GET, POST, OPTIONS, PUT, PATCH, DELETE"
  );
  // Request headers you wish to allow
  res.setHeader(
    "Access-Control-Allow-Headers",
    "X-Requested-With,content-type"
  );
  // Set to true if you need the website to include cookies in the requests sent
  // to the API (e.g. in case you use sessions)
  res.setHeader("Access-Control-Allow-Credentials", true);
  // Pass to next layer of middleware
  next();
});

Answer 2

Это не CORS вещь.

Вы не можете перенаправить с сервера.Другими словами, если пользователь не вошел в ваш API, следует вернуть неавторизованный ответ.Затем в вашем интерфейсе вы должны перенаправить на страницу входа в систему.

Проблема в том, что вы пытаетесь получить доступ к localhost: 3000 (front-end) из внутреннего интерфейса.И cors настроен на порт 4000 или бэкэнд.

 console.log(req.session.UserID)
 if(!req.session.UserID) {
     //Your should return unauthorized response then check the response at the front end react axios response.
       res.json({
         status: 401,
         message: "Action Not Allowed",
         name: "AUTHORIZATION_ERROR"
       });
     //res.redirect("http://localhost:3000/login")
  }else{ ....


getUserDetails(){
Fetch("http://localhost:4000/userDetails")
    .then((results)=> {
        if(results.data.status == 401) {
              // then change the page.
         }
     })
    .catch((err)   => console.log(err))
}

Answer 3

В вашем файле, где у вас есть app.use(cors({credentials: true, origin: true}));, попробуйте добавить это:

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

А затем в ваших маршрутах передайте следующее, как это:

app.get("/userDetails",(req,res,next)=>{
  //if there is no userID associated with the session then the user hasnt logged in, redirect to login
  console.log(req.session.UserID)
  if(!req.session.UserID) {
    res.redirect("http://localhost:3000/login")
  }else{
    let userID = req.session.UserID
    connection.query("SELECT * FROM `users` WHERE id =" + userID)
    .then((rows) => res.send(rows[0]))
    .catch((err) => console.error(err))
  }
})

Позвольте мнезнаю, сработало ли это!PS - Какую обработку на сервере вы используете?Предоставьте, чтобы мы могли помочь вам лучше!