后端：nodejs 前端：reactjs 错误：被 CORS 策略阻止答案

【问题标题】：backend:nodejs frontend:reactjs err: blocked by CORS policy后端：nodejs 前端：reactjs 错误：被 CORS 策略阻止
【发布时间】：2021-10-16 09:28:56
【问题描述】：

我正在尝试构建小型应用程序，我将前端来源放在白名单中，但仍然无法获取数据或登录。我将它部署在 heruko 上的后端和 gh-pages 上的前端在我在本地主机上部署前端和后端之前，通过将前端的本地主机源添加到白名单中，一切正常

这是我的 cors.js 代码

const express = require('express');
const cors = require('cors');
const app = express();

const whitelist = ['FRONTEND_ORIGIN'];
var corsOptionsDelegate = (req, callback) => {
    var corsOptions;
    console.log(req.header('Origin'));
    if(whitelist.indexOf(req.header('Origin')) !== -1) {
        corsOptions = { origin: true };
    }
    else {
        corsOptions = { origin: false };
    }
    callback(null, corsOptions);
};

exports.cors = cors();
exports.corsWithOptions = cors(corsOptionsDelegate);

登录代码


export const loginUser = (creds) => (dispatch) => {

    return fetch(baseUrl + 'users/login', {
        method: 'POST',
        headers: { 
            'Content-Type':'application/json' 
        },
        body: JSON.stringify(creds)
    })
    .then(response => {
        if (response.ok) {
            return response;
        } else {
            var error = new Error('Error ' + response.status + ': ' + response.statusText);
            error.response = response;
            throw error;
        }
        },
        error => {
            throw error;
        })
    .then(response => response.json())
    .then(response => {
        if (response.success) {
           ........
        }
        else {
            var error = new Error('Error ' + response.status);
            error.response = response;
            throw error;
        }
    })
    .catch(error => dispatch(loginError(error.message)))
};

登录用户路由器

var express = require('express');
const bodyParser = require('body-parser');
var User = require('../models/user');
var router = express.Router();
var passport = require('passport');
var authenticate = require('../authenticate');
const cors = require('./cors');

router.use(bodyParser.json());

router.options('*', cors.corsWithOptions, (req, res) =>{res.sendStatus(200);})


router.post('/login', cors.corsWithOptions, (req, res, next) => {

  passport.authenticate('local', (err, user, info) => {
    if (err)
      return next(err);

    if (!user) {
      res.statusCode = 401;
      res.setHeader('Content-Type', 'application/json');
      res.json({success: false, status: 'Login Unsuccessful!', err: info});
    }
    req.logIn(user, (err) => {
      if (err) {
        res.statusCode = 401;
        res.setHeader('Content-Type', 'application/json');
        res.json({success: false, status: 'Login Unsuccessful!', err: 'Could not log in user!'});          
      }

      var token = authenticate.getToken({_id: req.user._id});
      res.statusCode = 200;
      res.setHeader('Content-Type', 'application/json');
      res.json({success: true, status: 'Login Successful!', token: token, userId: req.user._id, firstname: req.user.firstname, lastname: req.user.lastname, image: req.user.image});
    }); 
  }) (req, res, next);
});

............

module.exports = router;

【问题讨论】：

标签： node.js reactjs heroku cors github-pages

【解决方案1】：

兄弟，我不确定我的解决方案是否会对您有所帮助，但我面临同样的问题。所以我使用名为“Moesif Origin & CORS Changer”的 chrome 扩展程序解决了它。将其安装在您的 chrome 扩展程序中，然后尝试获取数据。

【讨论】：

【解决方案2】：

1.打开您的 Chrome 浏览器并搜索 chrome 网上商店 2.搜索名为“Access Control Allow Origin”的扩展 3.在您的浏览器中安装它并前往该扩展程序的选项页面 4.在文本框上输入你的后端运行的本地主机地址，类似于“https://localhost:yourportnumber”

【讨论】：