Getting an error that Access to XMLHttpRequest has been blocked by CORS policy, in running an angular application. Any solution for it?

Question

I am adding this screenshot of the error.

Answer 1

You need to enable the CORS requests on your server.

If you use node and express:

var express = require('express')
var cors = require('cors')
var app = express()
app.use(cors()) // Globally on all routes

// Or locally on one route only.
app.get('/products/:id', cors(), function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for a Single Route'})
})

https://github.com/expressjs/cors

Answer 2

CORS is a standard security protocol that all major web browsers implement.

You can only allow Cross Origin Resource Sharing from the server, it cannot, for obvious security reasons, be overridden from the client (browser app) side.

@GwenM has shown how to do this from a server-side, Node-based Express app.

The way to do this in other server-side frameworks is different for each framework, but always results in an "Access-Control-Allow-Origin" header being sent to the client from the server.

If a server app wants the client to be able to request resources from any other site, the content of that header is an asterisk ("*"). If the server app wants the client to be able to request resources from a single external site, the content is the address of that site.

For a full explanation of how CORS works, see the MDN page at https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

For help in enabling this in your particular server / server-side framework, search here on SO - there are literally hundreds of questions and answers here about CORS having to do with every imaginable server environment.