I've been trying to get the Spotify access control allow to work but, every time I try to get onto authorization page, it gives me the:
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.
problem. I'm not sure what I am doing wrong, if anyone can help, that would be appreciated. I am using React with ES6 to do this as well if anyone was wondering.
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>
)
}
}
