Заголовки контроля доступа не разрешены

Question

Итак, у меня есть небольшое угловое приложение, которое подключается к моему узлу API.У меня нет проблем с моим запросом get, я получаю данные из моего API под нагрузкой.Мой почтовый запрос выдает ошибку tho;

Доступ к XMLHttpRequest в 'http://localhost:3000/api/heroes' из источника' http://localhost:4200' был заблокирован политикой CORS: Тип заголовка поля содержимого содержимогоне допускается Access-Control-Allow-Headers в ответе перед полетом.

и

ОШИБКА HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url:" http://localhost:3000/api/heroes", ok: false,…}

Это мой метод публикации на стороне клиента;

addHero(hero: Hero) { 
    this.http.post<Hero>("http://localhost:3000/api/heroes", hero)
        .subscribe((responseData) => {
            console.log(responseData);
        })
    this.heroes.push(hero); //Adds new hero to original array
    this.heroesUpdated.next([...this.heroes]); //Adds new array to subject
}

и вот мой бэкэнд;

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

app.post("/api/heroes", (req, res,next) => {
const post = req.body;
console.log(post);
res.status(201).json({message:"Succeed"});
});

Итак, я разрешил тип контента, но все еще получаю сообщение об ошибке. Есть предложения, как двигаться дальше?

Answer 1

Вы правильно понимаете, что проблема связана с CORS.

Ваша ошибка: Access-Control-Allow-Headers не допускается типом содержимого поля заголовка запроса в предпечатном ответе .

В некоторых случаях клиент отправляет «предварительный запрос» на сервер.Когда?

Например, когда ваш тип контента "сложный".Комплекс означает не в application/x-www-form-urlencoded, multipart/form-data или text/plain.

Или когда вы отправляете запрос POST с телом.

Есть и другие случаи, вы можете прочитать большеоб этом в MDN .

Предварительный запрос - это просто запрос с методом "OPTIONS", который отправляется в ту же самую конечную точку.Он ожидает получить обратно

1. успешный ответ

2. , который разрешает все заголовки

3. и позволяетисточник.

Ваше промежуточное программное обеспечение Express app.use((req,res,next) => {... соответствует требованиям 2 и 3. (На самом деле для 3 я бы рекомендовал установить заголовок «Access-Control-Allow-Origin» на http://localhost:4200 вместо localhost)

Но у вас нет промежуточного программного обеспечения или обработчика маршрутов для обработки запроса OPTIONS.Давайте добавим один:

Если мы получим запрос OPTIONS, мы вернем 200 OK.Если это не запрос OPTIONS, перейдите к следующему обработчику.

app.use((req, res) => {
    if (req.method === 'OPTIONS') {
        return res.sendStatus(200);
    }
    next();
});

Поскольку мы хотим, чтобы ответ OPTIONS на ALSO также устанавливал правильные заголовки, мы должны включить его после в «cors middleware»:

app.use((req,res,next) => {
// set cors headers and call next()
});

app.use((req, res, next) => {
// handle preflight requests
});

app.post('api/heroes', ...)

Наконец, есть, конечно, готовые решения для этого, например, пакет cors на npm , который предоставляет промежуточное программное обеспечение для express .Проверьте, как использовать его на странице npm .