Проблема с CORS при отправке запроса на получение внешнего API в - NodeJS / heroku

Question

У меня есть приложение, встроенное в Angular / NodeJs, которое использует сервер heroku.В приложении у меня есть возможность искать фильмы в «omdbapi». Все отлично работает, пока я не выполню поиск, консоль выдаст мне следующую ошибку:

Когда я включаю свое расширение CORS в Chrome, оно работает отлично.

Может кто-нибудь подсказать, в чем проблема.

код узла

const express      = require('express');
const bodyParser   = require('body-parser');
const mongoose     = require('mongoose');
const app          = express();
const path         = require('path');
const compression  = require('compression');
const port         = process.env.PORT || 8000;
const cors         = require('cors')

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", '*');
    res.header("Access-Control-Allow-Credentials", true);
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    res.header("Access-Control-Allow-Headers", 'Origin,X-Requested-With,Content-Type,Accept,content-type,application/json');
    next();
});

app.use(compression());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use("/images", express.static(path.join(__dirname, "images")));
app.use("/", express.static(path.join(__dirname, "angular")));

app.use((req, res, next) => {
    res.sendFile(path.join(__dirname, "angular", "index.html"));
});


app.listen(port, () => {
    console.log("App is running on port " + port);

[Edit] По-прежнему работает точка после изменения заголовка на предложение @jbarros.

const express      = require('express');
const bodyParser   = require('body-parser');
const mongoose     = require('mongoose');
const app          = express();
const path         = require('path');
const compression  = require('compression');
const port         = process.env.PORT || 8000;

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", '*');
    res.header("Access-Control-Allow-Credentials", true);
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    res.header("Access-Control-Allow-Headers", 'Authorization, Origin,X-Requested-With,Content-Type,Accept,content-type,application/json');
    next();
});

Угловая функция get

  getMoviesByName(movieName: string) {
    const url = 'https://www.omdbapi.com/?s=' + movieName + '&apikey=xxxxxxx&type=movie'
    return this.http.get<{Search: ImportedMovieModal[]}>(url)
  }

Answer 1

Вы не разрешаете заголовок Authorization в Access-Control-Allow-Headers.Поэтому добавьте заголовок:

Изменение:

res.header("Access-Control-Allow-Headers", 'Origin,X-Requested-With,Content-Type,Accept,content-type,application/json');

Для:

res.header("Access-Control-Allow-Headers", 'Authorization, Origin,X-Requested-With,Content-Type,Accept,content-type,application/json');

Кроме того, вам, вероятно, необходимо перехватить метод OPTIONS для отправки HTTP-статуса ok,Итак:

Измените:

next()

Для:

// intercept OPTIONS method
if ('OPTIONS' == req.method) {
    res.send(200);
} else {
    next();
}

И повторно разверните его в Heroku.