Cors still blocking requests after setting them on the server

Issue

Chrome CORS is still blocking the API even through my CORS are enabled on the server. I read the official documentation to enable CORS. My backend is written in Nest.js and the front end in Ionic/Angular.

Apart from the official docs, I've tried various other user suggested solutions such as setting options but none of them work.

API calls work perfectly fine when using postman.

Here's the server code:

const app = await NestFactory.create(AppModule);
  const options = {
    origin: '*',
    headers: '*',
    methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
    preflightContinue: true,
    optionsSuccessStatus: 204,
    credentials: true,
  };
  app.enableCors(options);
  await app.listen(3000);

Heres the http call:

  this.http.post(`${this.config.serverAddress}/api/auth/login`,{'username': 'test', 'password': 'password'})
        .subscribe(d=>{
            console.log(d);
        })

and finally, heres the chrome error message:

zone-evergreen.js:2952 Access to XMLHttpRequest at 'localhost:3000/api/auth/login' from origin 'http://localhost:8100' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Solution

You are missing the protocol in your URL. As the error states, only these protocols are supported:

http, data, chrome, chrome-extension, https.

So try the request with http://localhost:3000/api/auth/login

Answered By - Kim Kern