How can I redirect a page from an external Node/Express server

Question

I have a React/Node/Express web app up and running with two separate servers. React is running on localhost:8080 and proxying API requests to my node server running on localhost:3000. This will be my setup for production, so if possible, I would like to leave this structure intact.

The problem I'm running into is part of my API needs to redirect the user to a page to grab a token from the Spotify API, and then redirect back to my correct page upon successful authentication.

The API call proxy is being done like this:

const axios = require('axios');

const axiosInstance = axios.create({
    baseURL: process.env.NODE === 'production' ? '' : 'http://localhost:3000'
});

module.exports = axiosInstance;

Up to this point, this works great, as I can keep my React and Node server completely separate.

As I mentioned above, I need to redirect my React front-end through an API call on my back-end, to a different page (Spotify authentication) to authenticate users, which then Spotify redirects back to my site after a user allows or disallows access to their Spotify accounts.

On my front-end - localhost:8080, the user clicks a button which calls this function.

authenticate = () => {
    axios.get('/login')
        .then(data => console.log(data));
}

Which calls this endpoint on localhost:3000.

router.get('/', (req, res) => {
    let scopes = 'user-read-private user-read-email';
    let client = process.env.SPOTIFY_CLIENT;
    let redirect = 'http://localhost:3000/login/redirect';

    res.redirect(`https://accounts.spotify.com/authorize?response_type=code'
                &client_id=${client}${scopes ? `&scope=${encodeURIComponent(scopes)}` : ''}
                &redirect_uri=${encodeURIComponent(redirect)}&state=${state}`);
});

When I click the login button on my front-end, I get this response, which I believe to be from Spotify as I can successfully make cross-origin requests to other endpoints in my API.

Failed to load... No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

However, when I manually navigate to localhost:3000/login, the redirect works and I'm sent to the Spotify authentication page.

In addition, I tested trying to redirect my front-end to any url, and it doesn't work.

So my question is, how can I redirect my front-end through an API call from a server that doesn't also serve my static front-end content?

Answer 1

The reason this isn't working is because your axios.get('/login') is an AJAX request to your server which your server is then telling the AJAX request to be redirected to Spotify, but Spotify doesn't have your front-end server registered so you get the CORS error, since your request was initiated while on the front-end server URL.

Your AJAX request is following that redirect that was given, not trying to load your browser on http://localhost:3000, which would then redirect it to the Spotify authorization page.

Now, rather than doing:

authenticate = () => {
    axios.get('/login')
        .then(data => console.log(data));
}

You could do:

authenticate = () => {
    window.location.href = "http://localhost:3000"
}

This would direct your front-end application to visit the URL of your API server and follow the redirect immediately to Spotify and then you could authorize and be redirected back to your API server, which could then redirect back to your front-end application.

Truthfully, this is a bit overkill, since presumably your React application and node application look like they would be running on the same domain outside of development, given the relative URL's you're using. If you're using create-react-app, you should follow their instructions on configuring your proxy via this or manually via this.

tl;dr you need to tinker with how your proxy is configured or change from doing an AJAX request there to actually going directly to /login (not doing an AJAX request).