CODEWITHSUNDEEP
angularexpressspotify
Abel Asres
Abel Asres

Reputation: 1

Access to fetch at Spotify API redirected from backend from origin (angular clientside) has been blocked by CORS policy

Front-End: Angular Back-End: Express.js

I am relatively new to backend development and I am trying to learn how to work with Express.js. In an attempt to develop an app utilizing Spotify's Web Api I have run into a snag.

I am trying to make a request from my frontend to my backend api. The backend then makes a request to spotify's api for an access token. Part of the flow of obtaining an access token from spotify is to be redirected to spotify so that the user can allow the access. Once the backend responds with the redirection I get the below error related to CORS.

Access to fetch at 'https://accounts.spotify.com/authorize?client_id=clientId&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fauthorization%2Fget-spotify-token&response_type=code&scope=user-read-private+user-read-email&state=state' (redirected from 'http://localhost:3000/authorization') from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I'm not sure where to go from here. I've tried various web searches with no success. Any advice would be great. When making requests from the browser everything works fine. But when making the same request through my angular application I run into the issue.

Upvotes: 0

Views: 45

Answers (2)

Abel Asres
Abel Asres

Reputation: 1

The following link ( authentication flow must happen in a visible browsing context,) resolved my issue. Although I'd prefer to run everything through my angular front-end when communicating with the backend, the link explains that spotify's web api might not allow it.

Upvotes: 0

Alireza Einollahi
Alireza Einollahi

Reputation: 81

The issue you're facing is related to CORS (Cross-Origin Resource Sharing).

Handle it in angular app:

You can declare a proxy for your Angular app to bypass CORS issues by setting up a proxy.conf.json in your project folder. This allows your frontend to send requests to your backend without hitting CORS errors.

  1. Create proxy.conf.json in your Angular project root

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false,
    "changeOrigin": true
  }
}

  1. Update angular.json to use the proxy:

"architect": {
  "serve": {
    "options": {
      "proxyConfig": "proxy.conf.json"
    }
  }
}

  1. or run the Angular app like this

    ng serve --proxy-config proxy.conf.json

resolve it in server:

(I don't recommend it - but good to know) Ensure your backend is properly configured to allow CORS requests from your Angular app. In your Express.js app, you can use the cors middleware:

const cors = require('cors');
app.use(cors({
  origin: 'http://localhost:4200', // Allow Angular port
  credentials: true // Allow cookies/auth headers
}));

Upvotes: 0

Related Questions