Express.js - 跨域请求被阻止

Question

I have a Node.js server running on localhost port 3000 . I also have a Vue.js application running on port 8080 . I've implemented passportjs (Google strategy) on my login form that is written in Vue.js.

However, when I click on the Google+ button, I have a CORS blocked error which tells me that I have a missing CORS even though I have enabled cors in my server code.

I've tried changing parameters to cors() :

app.use(cors({origin: 'http://localhost:3000', credentials: true}));

I've also tried adding Header set Access-Control-Allow-Origin '*' to my apache2.conf file.

I also get a HTTP 302 code every time I hit the button.

Node.js file:

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const passport = require('passport');

const app = express();

app.use(cors());

// Routes
app.use('/user', users);

// Passport strategy
passport.use(new GoogleStrategy({
    clientID: process.env.GOOGLE_CLIENT_ID,
    clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    callbackURL: '/user/google/redirect'
},
function(accessToken, refreshToken, profile, done) {
    User.findOrCreate({ googleId: profile.id }, function (err, user) {
        return done(err, user);
    });
}));

// Server start
app.listen(3000, (req, res) => {
    console.log(`Listening to port 3000...\n`);
});

Router:

// auth with google+
router.get('/google', passport.authenticate('google', 
    { scope: ['https://www.googleapis.com/auth/plus.login']  }
));

// callback route for google to redirect to
router.get('/google/redirect', passport.authenticate('google', 
    { failureRedirect: '/login' }),
    function(req, res) {
    res.send('Done!');
});

Vue.js file:

<template>
    <v-card class="elevation-12" v-on:submit.prevent="login">
        <mdb-btn align-center justify-center class="btn-gplus" icon="google-plus-g" fab v-on:click="authGoogle()">Google +</mdb-btn>
    </v-card>
</template>

<script>
import axios from 'axios';
import router from '../router/router';
import { mdbBtn } from 'mdbvue';

const { URL } = require('../config');

export default {
  name: 'Login',
  methods: {
    authGoogle () {
      axios.get(`${URL}/user/google`, {
      }).then(res => {
        console.log(res);
      }).catch(err => {
        console.log(err);
      })
    }
  },
  components: {
    mdbBtn
  }
};
</script>

When I enter http://localhost:3000/user/google/ in my browser, the Google login page opens successfully but I cannot accomplish this in my code.

Answer 1

The cross-origin request blocked error is not caused by the your server configuration but by Google's server configuration. Your server tries to redirect the client to Google's login page. For security reasons, browsers do not always allow these kinds of cross origin redirects (otherwise you could always get around CSRF protection by adding a redirecting endpoint page on your own domain). To fix the problem, you can use an actual html link to http://localhost:3000/user/google/ , like so:

<a href="http://localhost:3000/user/google/">Google+</a>`

Answer 2

You can add cors headers through response headers in middleware:

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, Authorization");
    res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
    next();
});