如何使用Express和React处理Passport身份验证中的网络错误

Question

我有一个快速服务器运行，以启用用户身份验证使用护照。我在运行快速URL时获取用户信息，但我无法使用axios从我的反应应用程序中获取用户对象。我的反应应用程序说网络错误。

我试着用

const cors = require("cors");
app.use(cors())

快速应用程序。js（以http://localhost:3000）

var Strategy = new OpenIDConnectStrategy({
  discoveryURL : discovery_url,
  clientID : client_id,
  clientSecret : client_secret,
  callbackURL : callback_url,
  skipUserProfile : true
},
  function(iss, sub, profile, accessToken, refreshToken, params, done) {
    process.nextTick(function() {
        profile.accessToken = accessToken;
        profile.refreshToken = refreshToken;
        done(null, profile);
    })
  }
)

passport.serializeUser(function(user, done) {
  done(null, user);
});
passport.deserializeUser(function(user, done) {
  done(null, user);
});

passport.use(Strategy); 
function ensureAuthenticated(req, res, next) {
  if(!req.isAuthenticated()) {
              req.session.originalUrl = req.originalUrl;
    res.redirect('/login');
  } else {
    return next();
  }
}

app.get('/user', ensureAuthenticated, function(req, res) {
  res.json(req.user);
});

我的express应用程序在端口3000上运行，因此我可以在访问时看到用户对象http://localhost:3000/user

但是当我试图在我的反应应用程序中访问这个时，我收到了网络错误。

我的反应组件是

import React from 'react';
import axios from 'axios';

export default class UserInfo extends React.Component {
  constructor() {
    super()
    this.state = {
      userinfo: {}
    }
  }

  componentDidMount() {
    axios.get('http://localhost:3000/user')
    .then(res => {
      const userinfo = res.data;
      this.setState({ userinfo });
    }).catch(err => {
      console.log("Fetch error", err)
    })
  }

  render() {
    console.log("User Info", userinfo);
    return (
      <React.Fragment>
        Name: {this.state.userinfo.name}
      </React.Fragment>
    )
  }
}

错误是

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource (Reason: CORS request did not succeed).
Fetch error Error: Network Error

更改axios后编辑

当我在mozilla开发者工具中查看响应并检查网络时。API没有给出任何响应，然后将axios更改为

axios('https://localhost:3000/hello', { 
      method: 'get',
      withCredentials : true 
    })

然后开发工具中的newtwok给出了响应，react应用程序崩溃，说Uncaught（in promise）Error:networkerror

Answer 1

确保将cors中间件放置在路由之前。

app.use(cors());

...

app.get('/user', ensureAuthenticated, function(req, res) {
  res.json(req.user);
});

此外，react应用程序中使用的url使用的是httpsscheme。