Javascript 反应+；对飞行前请求的快速响应不'；无法通过访问控制检查

我知道他们是一个类似的问题，但它不是具体的表达，以反应作为前端

我得到这个错误

从中获取“”的访问权限 源“”已被CORS策略阻止： 对飞行前请求的响应未通过访问控制检查：它 没有HTTP ok状态

我的目标是console.log响应

下面是my express app.js的设置方式

app.js

var express = require('express');
var app = express();
var userRoute = require('./routes/users');
var postRoute  = require('./routes/posts');
var bodyParser = require('body-parser');
var logger = require('morgan');
var session = require('express-session');
var cookieParser = require('cookie-parser') ;
var dotenv = require('dotenv');
var env = dotenv.config();
var cors = require('cors');
var models = require('./models/');
const port = process.env.PORT || 8000;
const passport = require('passport');
const path = require('path');
// const allowOrigin = process.env.ALLOW_ORIGIN || '*'

// CORS Middleware





if (!process.env.PORT) {
  require('dotenv').config()
}

if (!process.env.PORT) {
  console.log('[api][port] 8000 set as default')
  console.log('[api][header] Access-Control-Allow-Origin: * set as default')
} else {
  console.log('[api][node] Loaded ENV vars from .env file')
  console.log(`[api][port] ${process.env.PORT}`)
  console.log(`[api][header] Access-Control-Allow-Origin: ${process.env.ALLOW_ORIGIN}`)
}

// app.use(cors({
//   origin: process.env.ALLOW_ORIGIN,
//   credentials:true,
//   allowedHeaders: 'X-Requested-With, Content-Type, Authorization, origin, X-Custom-Header',
//   methods: 'GET, POST, PATCH, PUT, POST, DELETE, OPTIONS',

// }));




require('./config/passport-github');
require('./config/passport');

app.use(logger('dev'));
app.use(express.static(path.join(__dirname, 'public')));
app.use(cookieParser());

app.use(session({
  secret : process.env.JWT_SECRET,
  saveUninitialized: false,
  maxAge: 1000 * 60 * 60 * 84,
  resave: false

}));

app.use(passport.initialize());
app.use(passport.session());


app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended:false})); 

const isAuthenticated = function(req, res, next){
  if(req.isAuthenticated()){
    next();
    console.log('this works');
  }else{
   res.redirect('http://127.0.0.1:8001/signIn');
  }
}
app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Credentials',  true);
  res.header(' preflightContinue', false)
  // res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
  // res.header('Access-Control-Allow-Headers', 'Origin, Content-Type, X-Auth-Token');
  next();
});

app.use('/api/users', userRoute );
app.use('/api/posts', isAuthenticated,  postRoute );
app.use(function(req, res, next) {
  res.locals.user = req.user; // This is the important line
  // req.session.user = user

  console.log(res.locals.user);
  next();
});




models.sequelize.sync().then(() => {
  const server = app.listen(port, () => {
    console.log(`Server is up and running on port ${port}`);
  });
});

router.get('/auth/github', passport.authenticate('github') );

router.get('/auth/github/callback', 
  passport.authenticate('github', { failureRedirect: '/'}),
  function(req, res, done) {

     console.log(`session ${req.session.passport.user} `); // renders the user id
      const user = req.session.passport.user;
        if(user){   
          req.login(user, err => {
            const data = {
                id: req.session.passport.user   
            };
            models.User.findOne({
              where: {
                id: data.id,
              },
            }).then(user => {
              const token = jwt.sign({ id: user.id  }, process.env.JWT_SECRET);
              res.cookie("jwt", token, { expires: new Date(Date.now() + 10*1000*60*60*24)});
              res.status(200).send({
                auth: true,
                token: token,
                message: 'user found & logged in',
              });
            })
          // res.cookie("jwt", token, { expires: new Date(Date.now() + 10*1000*60*60*24)});
          // res.redirect('http://127.0.0.1:8001/dashboard')   

          });

        } else if(user == null) {
            console.log(info.message);
            res.status(403).send(info.message);
        }

  });

前端

import React, {Component} from 'react';
// import axios from 'axios';
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';
import Avatar from '@material-ui/core/Avatar';
import {withStyles} from '@material-ui/core/styles';
import Chip from '@material-ui/core/Chip';
import {connect} from 'react-redux';
import {compose} from 'redux';
import {Redirect} from 'react-router-dom';
import ourStyles from '../styles/ourStyles';
import github from './github/github';
import Axios from '../Axios';
import { history } from '../components/layout/Navbar';
class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            user: ""
        }


    }



    fetchData = () => { // error happens here

        fetch(process.env.REACT_APP_BASE_GITHUB_SIGNIN, { 
            method: "GET",
                headers: {
                    // 'Access-Control-Allow-Origin':'*',
                    'Content-Type': 'application/json',          
                },    
            })
            .then( (res)=> {
                console.log(res)
                // history.push('/dashboard')   
            })
            .catch( (err) => {

            })

    }


    render() {
        const {classes} = this.props;

        if (this.props.isAuthenticated) {
            return (<Redirect to='/dashboard' />);
        }
        return (
            <div className={classes.root}>
                <Grid container justify="center" spacing={44}>
                    <Grid item sm={7}>
                        <Paper className={classes.paper}>
                            <h1>Sign Up</h1>
                            <Chip
                                label="Sign In with Github"
                                clickable
                                onClick={this.fetchData}
                                avatar={< Avatar alt = "Natacha" src = "https://avatars0.githubusercontent.com/u/9919?s=280&v=4" />}
                                // href={process.env.REACT_APP_BASE_GITHUB_SIGNIN}
                                component="a"
                                className={classes.chip}/>



                            <Chip
                                label="Sign Up with E-Mail"
                                clickable
                                href="/signUp"
                                component="a"
                                className={classes.chip}/>
                        </Paper>
                    </Grid>
                </Grid>
            </div>
        );
    }
}
const mapStateToProps = (state) => ({
    token: state.user.getToken,
    isAuthenticated: state.user.isAuthenticated,
    redirectTo: state.user.redirectTo
})
const mapDispatchToProps = (dispatch) => ({
});
// export default withStyles(styles)(Navbar);
export default compose(connect(mapStateToProps, mapDispatchToProps), withStyles(ourStyles))(Home);

---

你已经进口了cors，但你已经用过了

像这样将

cors

添加到后端（在端点上方）：

---

如果数据包中有308个响应代码，请尝试在端点末尾添加或删除“/”

你用cors做后端了吗？我会发布完整的app.js代码。这没什么帮助，我已经检查过多次了。如果您查看控制台，用于了解允许来源的选项请求返回500错误，您是否尝试了解原因？我尝试过，但我获得了获取的

访问权限'https://github.com/login/oauth/authorize?response_type=code&redirect_uri=http%3A%2F%2F127.0.0.1%3A8000%2Fapi%2Fusers%2Fauth%2Fgithub%2Fcallback&client_id=285bda995ab97d093821“（已从中重定向”http://localhost:8000/api/users/auth/github')来自原点的“null”已被CORS策略阻止：对飞行前请求的响应未通过访问控制检查：请求的资源上不存在“访问控制允许原点”标头。如果不透明响应满足您的需要，请将请求的模式设置为“no cors”以获取禁用cors的资源。

i仍然从源站获取

cors策略已阻止“null”：对飞行前请求的响应未通过访问控制检查：请求的资源上不存在“access control Allow origin”标头。如果不透明响应满足您的需要，请将请求的模式设置为“no cors”，以获取禁用cors的资源

ill upvote，因为这实际上是我还没有尝试过的。

app.use(cors());

app.use(cors({
    'allowedHeaders': ['Content-Type'], // headers that React is sending to the API
    'exposedHeaders': ['Content-Type'], // headers that you are sending back to React
    'origin': '*',
    'methods': 'GET,HEAD,PUT,PATCH,POST,DELETE',
    'preflightContinue': false
}));