Spotify 授权访问控制允许来源问题

Question

我一直在尝试让 Spotify 访问控制允许工作，但是每次我尝试进入授权页面时，它都会给我：

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:5000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

问题。我不确定我做错了什么，如果有人可以提供帮助，将不胜感激。如果有人想知道，我也在使用 React 和 ES6 来做到这一点。

routes.js

const express = require('express');
const router = express.Router();
const request = require('request');
const querystring = require('querystring');

const env_client_id = process.env.client_id;
const env_client_id_secret = process.env.client_id_secret;
const redirect_uri = 'http://localhost:5000' || 'https://connectthrumusic.herokuapp.com/';

router.post('/getClientIDs', function(req, res, next) {
  res.json ({
    client_id: env_client_id,
    client_id_secret: env_client_id_secret
  })
});

router.get('/spotifyLogin', function(req, res, next) {
  var scope = 'user-read-private user-read-email';
  res.redirect('https://accounts.spotify.com/authorize?' +
    querystring.stringify({
      response_type: 'code',
      client_id: env_client_id,
      scope: scope,
      redirect_uri: redirect_uri
    }));
});

module.exports = router;

app.js

const express = require('express');
const path = require('path');
const routes = require('./router/routes');
const app = express();
const cors = require('cors');
const port = process.env.PORT || 5000;

app.use(express.static(path.join(__dirname, "docs")));

app.use(cors());

app.get("/", function(req, res) {
  res.send("invalid");
});

app.listen(port, function() {
  console.log("Running on Port: " + port);
});

app.use('/info', routes);

home.jsx

import React from 'react';
import 'whatwg-fetch';

export default class Home extends React.Component {
  constructor() {
    super();

    this.state = {
      client_id: '',
      client_id_secret: ''
    }

  }

  componentDidMount() {
    this.getIds().then(result =>
      this.setState({
        client_id: result.client_id,
        client_id_secret: result.client_id_secret
      })
    )
  }

  getIds() {
      var fetchedId = fetch('/info/getClientIDs', {
        method: 'POST',
        headers: {'Accept': 'application/JSON'}
      })
      .then(function(data) {
        return data.json();
      })
      .then(function(parsedData) {
        return parsedData;
      })

      return fetchedId;
  }

  redir() {
    fetch('/info/spotifyLogin')
    .then(function(data) {
      //do nothing for now
    })
    .catch(function(error) {
      // If there is any error you will catch them here
    });
  }

  render() {
    return (
      <div>
        <button onClick={this.redir}>Redirect</button>
        {this.state.client_id}
      </div>
    )
  }
}

Answer 1

看来您必须在服务器中设置正确的标头。 See this question for a possible solution.Also take a look at this question for a good explanation of the problem.

Answer 2

这是跨域请求问题，而端口 5000 不允许访问 spotify API。

您可以在https://github.com/spotify/web-api-auth-examples 上找到使用 express 与 Spotify 执行身份验证流程的示例（请参阅 authentication_code 方法）。

如果它不起作用，请尝试将您的端口更改为 8080 或 8888