访问XMLHttpRequest at Twitter_OAuth_Url (从“从原点”重定向到“null”)已被阻止

Question

我在我的均值堆栈应用程序中使用了。我有一个端点推特-登录，当角应用达到这一点，护照-twitter模块是用来认证用户。在获取oaut_token时，它将用户重定向到这个url：

代币

在重定向时，应用程序在标题中抛出上述错误。使用cors模块或手动设置标头不会有帮助。

这是我的密码：

app.ts

import express from 'express';
import mongoose from 'mongoose';
import bodyParser from 'body-parser';
import { DATABASE_URL, JWTSECRET } from './config/config';
import { Routes } from './routes/routes';
const passport = require('passport');
const cors = require('cors');
const cookieSession = require('cookie-session');
const cookieParser  = require('cookie-parser');
const passportSetup = require('./config/passport-config');

class App {

 public app : express.Application;
 public routePrv: Routes = new Routes();

 constructor(){
    this.app = express();
    this.config();
    this.mongoSetup();
    this.routePrv.routes(this.app);    
 }

    private config(): void {

        this.app.use( cors() ); 

        this.app.use( cookieSession({
              name: "VIP_Session",
              keys: [JWTSECRET],
              maxAge: 24 * 60 * 60 * 100
            })
          );

        this.app.use(cookieParser());

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

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

    private mongoSetup(): void{
        mongoose.connect(DATABASE_URL, {useCreateIndex: true, useNewUrlParser: true});      
        const connection = mongoose.connection;
        connection.once('open', () => {
            console.log('MongoDB connection established successfullly.');
        });
    }
}

export default new App().app;

server.ts

import app from './app';
import * as http from 'http';
import { PORT } from './config/config';

http.createServer(app).listen(PORT , () => {
    console.log('Express server listening on port '+ PORT);
});

routes.ts

    import {Request, Response, NextFunction} from "express";
    const passport = require('passport');

    export class Routes { 

        public routes(app: any): void {   


app.route('/api/twitter-login').get(passport.authenticate('twitter'));

    app.route('/api/twitter-callback').get(
      passport.authenticate('twitter',
      { failureRedirect:  'http://localhost:4200/login?isAuthenticated=false',
        successRedirect : 'http://localhost:4200/login?isAuthenticated=true' 
      }));

    }

passport-config.ts

const TwitterStrategy = require('passport-twitter');
import * as mongoose from 'mongoose';
import passport from 'passport';
import { TWITTER_CONSUMER_KEY, TWITTER_CONSUMER_SECRET } from '../config/config';
import { userSchema }  from '../models/';
let User = mongoose.model('User' , userSchema);

passport.serializeUser((user : any, done) => {
  done(null, user._id);
});

// deserialize the cookieUserId to user in the database
passport.deserializeUser((id, done) => {
  User.findById(id)
    .then(user => {
      done(null, user);
    })
    .catch(e => {
      done(new Error("Failed to deserialize an user"));
    });
});      

passport.use('twitter', new TwitterStrategy({
  consumerKey: TWITTER_CONSUMER_KEY,
  consumerSecret: TWITTER_CONSUMER_SECRET,
  includeEmail: true,
  callbackURL: '/api/twitter-callback'
},
async (token : any, tokenSecret  : any, profile  : any, done  : any) => {
  console.log(profile.emails);
  // find current user in UserModel
  const currentUser = await User.findOne({
    user_name: profile.username
  });
  // create new user if the database doesn't have this user
  if (!currentUser) {
    const newUser = await new User({
      first_name : profile.displayName.split(' ')[0],
      last_name  : profile.displayName.split(' ')[1],
      user_name  : profile.username,
      email      : profile.emails[0].value ,
      avatar     : profile.photos[0].value ? profile.photos[0].value : '', 
      twitterId  : profile.id
    }).save();
    if (newUser) {
      done(null, newUser);
    }
  }
  done(null, currentUser);
}
));

Answer 1

在进行了一些研究之后，我发现来自Angular7应用程序的api调用应该使用以下方法之一。

使用锚标记：

<a class="btn btn-twitter" href='http://SERVER_URL/api/twitter-login'> Sign Up / Login with Twitter</a>

或

window.location.href = 'http://SERVER_URL/api/twitter-login'。

使用这种方法，原产地不会为null，护照-推特的所有回调都会非常好。