@Alex_bliznec

Как отправить данные формы ангуляр через POST запрос?

В учебных целях пишу приложение на ангуляр, которое должно получать/отправлять на сервер данные из формы. Сервер на node.js работает на локальном порте 8888, ангуляр на 4200. Гет запрос проходит нормально и возвращает мне массив объектов из БД. Но когда отправляю ПОСТ запрос на добавление выдает следующую ошибку:
5d1b73e40180a990808823.jpeg
Вот код на клиенте:
@Injectable()
export class HttpService {
    constructor(private http: HttpClient) {}

    getAuthors() {
        return this.http.get('http://localhost:8888/authors');
    }

    postAuthor(author: Author) {
        const body = {name: author.name, id: author.id};
        const headers: HttpHeaders = new HttpHeaders({'Content-Type':'application/x-www-form-encoded'});
        // console.log(`this is body`);
        // console.log(body)
        return this.http.post('http://localhost:8888/author', body, {headers});
    }

в компоненте подписываюсь на событие:
addAuthor() {
    // console.log(this.form);
    const recievedAuthor: Author = {name: this.form.value.name, id: +this.form.value.id};
    // console.log(recievedAuthor);
    this.httpService.postAuthor(recievedAuthor).subscribe()
  }


вот код на сервере:
createAuthor: async (ctx) => {
        if (ctx.request.body.name === '' || ctx.request.body.name === undefined 
        && ctx.request.body.id === '' || ctx.request.body.id === undefined) {
            ctx.body = {"validation error": "Все поля должны быть заполнены"};
            return;
        }
        try {
            const author = await Author.create({
                id: ctx.request.body.id,
                name: ctx.request.body.name
            });
            ctx.body = `author ${author} created`;
        } catch {(err) => {console.log(err)}};
    }


Подскажите, что я делаю не так, или что нужно сделать? Я понимаю, что проблема связана с кросс-доменными запросами, думал, что дело в header-ах, поэтому по добавлял их где только можно, пересмотрел кучу сайтов, но конкретного решения так и не нашел... Думал также, что проблема может быть связана с форматом отправляемых данных, т.к. постман корректно обрабатывает запрос.
  • Вопрос задан
  • 403 просмотра
Решения вопроса 2
Xuxicheta
@Xuxicheta Куратор тега Angular
инженер
Не надо вам cors на бэке добавлять без нужды. Настройте прокси https://github.com/angular/angular-cli/blob/master...

конкретно для вас - создать файл proxy.conf.json с содержимым
{
  "/api": {
    "target": "http://localhost:8888",
    "secure": false
  }
}


запускать как
"start": "ng serve --proxy-config proxy.conf.json"

ну и сервер должен принимать все апишные запросы как /api/чето там
Ответ написан
BRAGA96
@BRAGA96
const express = require("express");
const cors = require("cors");
const app = express();

app.use(cors());
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
inoise
@inoise
Solution Architect, AWS Certified, Serverless
В 100500ый раз, это гуглится за 5 минут. Браузер блокирует обращения к другому домену из js, поэтому вам на сервере надо отдавать header Access-Control-Allow-Origin с нужным доменом
Ответ написан
@givemoneybiatch
Немного веб, немного гейм
попробуй 'Content-Type' в список хедеров
res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization, Refresh");
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,PATCH,DELETE');
    res.header("Access-Control-Allow-Credentials", "true");
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы