从我的 reactjs 应用程序向我的快递服务器发送请求时出现 CORS 错误，该服务器重定向到 Spotify 的 API [重复]

Question

通过我的 react 应用程序的任何其他请求似乎都可以正常工作，直到我尝试将 res.redirect 发送到其他地方。 我有点理解为什么它不起作用，但我不知道如何正确实现类似的东西。 参考代码：

反应 app.js：

  function loginToSpotify() {
    axios.get('http://localhost:4000/login')
    .then(res => {
      console.log(res)
    })
    .catch(err => {
      console.log("error!")
    })
  }

表达 server.js：

var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var cors = require('cors');


var app = express();

app.use(cors())
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);

module.exports = app;

表示 index.js 登录调用：

const { default: axios } = require('axios');
var express = require('express');
var router = express.Router();
var querystring = require('querystring')
var  SpotifyWebApi = require('spotify-web-api-node');
/* GET home page. */

let spotifyApi = new SpotifyWebApi({
    clientId:'c2b60e83cbdb4b5ba923140f0c32ac8f',
    clientSecret:'d45b554801ab4333b89a36bdbf04fad7'
})

let clientId = 'c2b60e83cbdb4b5ba923140f0c32ac8f'
let clientSecret = 'd45b554801ab4333b89a36bdbf04fad7'
let scopes = 'user-read-playback-state user-read-currently-playing'
let redirectUri = 'http://localhost:4000/token'


router.get('/login', (req, res) => {
  res.redirect('https://accounts.spotify.com/authorize' + '?response_type=code&client_id=' + clientId + '&scope=' + encodeURIComponent(scopes) + '&redirect_uri=' + encodeURIComponent(redirectUri))
})

它甚至永远不会被重定向回来，它每次都会抛出这个错误：

Access to XMLHttpRequest at 'https://accounts.spotify.com/authorize?response_type=code&client_id=<removed by me just in case>&scope=user-read-playback-state%20user-read-currently-playing&redirect_uri=http%3A%2F%2Flocalhost%3A3000' (redirected from 'http://localhost:4000/login') from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我认为如果我从我的 react 应用程序调用我的服务器，然后我的服务器重定向到 spotify 的 api 会很好，但它仍然给我这个错误。

还要注意，如果我从浏览器访问服务器的登录页面，它会起作用，但它不喜欢我猜的“两次跳转”

我已经看到了这个帖子，但仍然有点困惑： Access-Control-Allow-Origin denied spotify api 如果我从我的客户端调用我的服务器，然后服务器调用令牌，它不应该工作吗？

如何正确实现登录？

Answer 1

避免 CORS 问题的第一步是确保您在 Spotify 上的网站是“localhost:4000”。

重定向最有可能引起关注。您不想使用重定向。您希望 Spotify 对用户进行身份验证，然后使用令牌将他们重定向回您的网站。

我建议使用passportJS，如果您不熟悉处理令牌等，这是一种更安全的方式。

制定这样的策略

const passport = require('passport');
const SpotifyStrategy = require('passport-spotify').Strategy;
passport.serializeUser(function(user, done) {
  done(null, user);
});
passport.deserializeUser(function(user, done) {
  done(null, user);
});
passport.use(new SpotifyStrategy({
  clientID: "c2b60e83cbdb4b5ba923140f0c32ac8f",
  clientSecret: "d45b554801ab4333b89a36bdbf04fad7",
  callbackURL: "http://localhost:4000/auth/spotify/callback"
},
function(accessToken, refreshToken, profile, done) {
  return done(null, profile);
}
));

PassportJS Spotify Docs

const passport = require('passport');
require('./passport')

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

app.get('/auth/spotify',passport.authenticate('spotify'));
app.get('/auth/spotify/callback',passport.authenticate('spotify', { failureRedirect: '/auth/error' }),
function(req, res) {
  res.redirect('/');
});
app.get('/logout', (req, res) => {
  req.session = null;
  req.logout(); 
  res.redirect('/');
})