Node.js с Angular - ошибка CORS при отправке запроса

Question

У меня проблема с моим API-интерфейсом node.js. У меня есть API, работающий на порте 3000, и угловой интерфейс с портом 4200.

Когда я отправляю запрос из angular в API, у меня возникает ошибка с CORS. Я пробовал три разных решения, но все еще не работает.

1. Первое решение - установить пакет cors и добавить к коду

app.use (CORS ());

2. Второе решение - добавить код ниже:

 app.use((req, res, next) => {
   res.header("Access-Control-Allow-Origin", "*");
   res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
   res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
   next();
})

3. Последнее решение - добавить код ниже с URL внешнего интерфейса:

app.use(cors({
  origin: 'http://frontend.com:4200'
}));

Ничего из вышеперечисленного не сработало, т.е. я все еще получаю сообщение об ошибке с CORS все время. Когда я отправляю запрос от Почтальона, все отлично работает.

Мой фактический код:

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const carRoutes = require('./routes/car');
const sequelize = require('./util/db');
const cors = require('cors');

sequelize.sync().catch(error => {
  console.log(error);
});

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

app.use(carRoutes);
app.listen(3001);

Сообщение об ошибке:

Запрос к ресурсу другого источника был заблокирован: Политика «Политика происхождения» не позволяет загружать удаленные ресурсы из "http://localhost:3000/car" (неудачный запрос CORS).

Answer 1

Более простое решение - реализовать прокси, который перенаправит ваш вызов API на localhost: 300.Добавьте новый файл с именем proxy.config.json и добавьте в него следующую конфигурацию json.

{
    "/car/*": {
        "target": "http://localhost:3000", 
        "secure": false,
        "logLevel": "debug"
    }
}

после этого вам необходимо обновить package.json и обновить раздел Scripts следующим кодом: "start": "ng serve --proxy-config proxy.config.json",.Выполните вышеперечисленное в своем использовании npm start, в противном случае вы можете просто запустить ng serve --proxy-config proxy.config.json в командной строке, не обновляя package.json, но вам придется помнить, чтобы запускать его каждый раз.