CODEWITHSUNDEEP
angularexpress
Hikaru Shindo
Hikaru Shindo

Reputation: 2913

zone.js:2969 Access to XMLHttpRequest has been blocked by CORS policy

I'm using Angular to connect RestAPI. I got an error

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

But this is my POSTMAN result, enter image description here

Here is my Nodejs code

const express    = require('express');
const app        = express();
const bodyParser = require('body-parser');

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

var port = process.env.PORT || 8000;

var router = express.Router();

app.all('*', function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'DELETE, HEAD, GET, OPTIONS, POST, PUT');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

app.use('/', router);

router.get('/api', function(req, res, next) {
    res.json({ message: 'hello' });
});

router.post('/auth/api/authen', function(req, res, next){

  res.json({
    success : true,
    result : req.body
  });

});

// START THE SERVER
app.listen(port);
console.log('Magic happens on port ' + port);

private options = { headers: new HttpHeaders().set('Content-Type', 'application/json') }

  login(username:string, password:string, ipaddress:string ) : Observable<any> {
    return this.http.post<any>( this.baseUrl + '/auth/api/authen', { username, password, ipaddress }, this.options )
      .pipe(
        map(res => {
          console.log(res);
          return res;
        })
      );
  }

Everything seems very simple but I cannot send a request from Angular app to the server. Please help. Thanks.

Upvotes: 1

Views: 10369

Answers (3)

namnh
namnh

Reputation: 533

Actually, both @Pardeep Jain & @vadi are right.

You should try CORS first https://expressjs.com/en/resources/middleware/cors.html then change your URL request to back-end from localhost:3000/auth/api/authen to http://localhost:3000/auth/api/authen.

Just in case your Options request has blocked, should be config it by the link above.

Upvotes: 0

Vadim
Vadim

Reputation: 3439

The error tells that, for some reason, request has been sent as localhost:8000/auth/api/authen, which is not supported for protocol schemes:

zone.js:2969 Access to XMLHttpRequest at 'localhost:8000/auth/api/authen' from >origin 'http://localhost:4200' has been blocked by CORS policy: Cross origin >requests are only supported for protocol schemes: http, data, chrome, chrome->extension, https.

If you change your request to http://localhost:8000/auth/api/authen, this error disappears.

Upvotes: 6

Pardeep Jain
Pardeep Jain

Reputation: 86740

In Your Node application you need to enable CORS, As it is clear in the error Request is being blocked by CORS issue, So just these lines of code -

var cors = require('cors')

var app = express()
app.use(cors());

This will enable your HTTP request for any domain, you can customise origin list as per your requirements.

Upvotes: 0

Related Questions