zone.js: 2969 Доступ к XMLHttpRequest был заблокирован политикой CORS

Question

Я использую Angular для подключения RestAPI. Я получил ошибку

zone.js: 2969 Доступ к XMLHttpRequest по адресу 'localhost: 8000 / auth / api / authen' from origin 'http://localhost:4200' заблокирован политикой CORS: запросы на разные источники поддерживаются только для схем протоколов: http , data, chrome, chrome-extension, https.

Но это мой результат ПОСТМАНА,

Вот мой код Nodejs

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;
        })
      );
  }

Все выглядит очень просто, но я не могу отправить запрос из приложения Angular на сервер. Пожалуйста помоги. Спасибо.

Answer 1

Ошибка говорит о том, что по какой-то причине запрос был отправлен как localhost: 8000 / auth / api / authen , что не поддерживается для схем протокола:

zone.js: 2969 Доступ к XMLHttpRequest по адресу 'localhost: 8000 / auth / api / authen' from> origin 'http://localhost:4200' заблокирован политикой CORS: запросы Cross origin> поддерживаются только для схем протоколов: http,data, chrome, chrome-> extension, https.

Если вы измените свой запрос на http://localhost:8000/auth/api/authen,, эта ошибка исчезнет.

Answer 2

На самом деле оба @Pardeep Jain и @vadi правы.

Сначала вы должны попробовать CORS https://expressjs.com/en/resources/middleware/cors.html, а затем изменить свой URL-запрос на back-end с localhost: 3000 / auth/ api / authen до http://localhost:3000/auth/api/authen.

На случай, если ваш запрос параметров заблокирован, настройте его по ссылке выше.

Answer 3

В приложении Node необходимо включить CORS, как ясно из ошибки. Запрос блокируется проблемой CORS, поэтому только эти строки кода -

var cors = require('cors')

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

.HTTP-запрос для любого домена, вы можете настроить список источников в соответствии с вашими требованиями.