Angular 8 HttpClient Post Request Тип контента разгром - PullRequest
Новая
       41

Angular 8 HttpClient Post Request Тип контента разгром

0 голосов
/ 06 октября 2019

Я не уверен, в чем дело, надеюсь, кто-нибудь может мне помочь!

Я пытаюсь сделать POST для бэкэнд-API, но я получаю код состояния 415, потому что тип контента отправляется как "text / plain", но эта конечная точка ожидает application / json. Я подумал, что это может быть API, но POST прекрасно работает в PostMan (см. Скриншот ниже).

Я пытался вручную установить тип содержимого для application / json в заголовках запроса, но япросто получите код состояния 500 (см. скриншот ниже). Все остальные конечные точки API работают просто отлично, но они ожидают "text / plain" ... любая помощь очень ценится!

Я просто установил простую кнопку для создания POST: 

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.less']
})
export class HomeComponent implements OnInit {

constructor(private http: HttpClient) { }

ngOnInit() {}

onClickMe( ) {

    // I'VE TRIED ALL THESE DIFFERENT WAYS ALSO

      /* 
        const headers = new HttpHeaders({
            'Content-Type': 'application/json'
        });

        const httpHeaders = new HttpHeaders();
        httpHeaders.append('Content-Type', 'application/json');

        const options = {
            headers: httpHeaders
        }; 
      */

    const httpHeaders = new HttpHeaders().set(
        'Content-Type',
        'application/json'
    );
    const uNameObj = {
        username: "asdf"
    };

    const jsonStr = JSON.stringify(uNameObj);
    let existsCheck: boolean;
    this.http
      .post('http://localhost:8080/myapp/user/username',
            '{"username": "asdf"}',
           {
             observe: 'response',
             headers: httpHeaders
            })
       .subscribe(
           responseData => {
               if (responseData.status === 200) {
                   existsCheck = true;
               } else {
                   existsCheck = false;
               }
           },
           error => {
               console.log('Error with post button', existsCheck);
           }
       );
    }
 }

NO HEADER OPTIONS ADDED WITH CONTENT_TYPE CHANGED IN HEADERS

POSTMAN SCREENSHOT - 200 STATUS CODE: BACKEND API CORS FILTERS

1 Ответ

1 голос
/ 06 октября 2019

Прежде всего, вам не нужно ничего делать, чтобы установить запрос Content-Type как application/json. Это то, что HttpClient делает для вас из коробки.

Теперь, что касается вашей ошибки, это как-то связано с CORS. Поскольку это запрос AJAX, который вы делаете для API, работающего на отдельном PORT (8080), в то время как ваше приложение внешнего интерфейса работает на отдельном порте (4200, скорее всего), браузер заблокирует запрос.

Чтобы разрешить, ему понадобится access-control-allow-origin: * в заголовках ответа. Это то, что ваш браузер сделал бы, отправив сначала вызов OPTIONS в API.

Поскольку у API на самом деле нет access-control-allow-origin: * в заголовке ответа, он будет заблокирован. Это именно то, что здесь происходит.

FIX:

Поскольку это API-интерфейс POST, и вы запускаете сервер на локальном компьютере, можно с уверенностью предположить, что вы можетенастройте сервер REST API для включения CORS.

Если бы это был сервер Express, вы могли бы включить на нем CORS, используя промежуточное ПО cors.

Вот Внешний интерфейс - образец StackBlitz для вашего реф.

Вот Backend - Образец CodeSandbox для вашей ссылки.

...