Question

我有一个运行在本地主机端口3000上的Node.js服务器。我还有一个在端口8080上运行的Vue.js应用程序。我已经在用Vue.js编写的登录表单中实现了passwordjs（Google策略）。

但是，当我单击Google+按钮时，出现了一个CORS被阻止的错误，即使我在服务器代码中启用了cors，也告诉我缺少一个CORS。

我尝试将参数更改为cors()：

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

我还尝试添加Header set Access-Control-Allow-Origin '*' 到我的apache2.conf文件中。

每次按下按钮时，我还会获得HTTP 302代码。

Node.js文件：

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`);
});

路由器：

// 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文件：

<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>

当我在浏览器中输入http://localhost:3000/user/google/时，Google登录页面会成功打开，但是我无法在代码中完成此操作。

Answer 1

您可以通过中间件中的响应标头添加cors标头：

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();
});

Answer 2

跨域请求阻止错误不是由您的服务器配置引起的，而是由Google的服务器配置引起的。您的服务器尝试将客户端重定向到Google的登录页面。出于安全原因，浏览器并不总是允许此类跨源重定向（否则，您始终可以通过在自己的域中添加重定向端点页面来避开CSRF保护）。要解决此问题，您可以使用指向http://localhost:3000/user/google/的实际html链接，如下所示：

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

Express.js-跨域请求被阻止

2 个答案: