Angular 8 HttpClient 发布请求内容类型崩溃

Question

我不确定交易是什么，希望有人能给我一些帮助！

我正在尝试对后端 API 进行 POST，但我收到了 415 状态代码，因为内容类型正在作为“文本/纯文本”发送，但此端点需要应用程序/json。我想可能是 API，但 POST 在 PostMan 中工作得很好（见下面的截图）。

我尝试在请求标头中手动将 content-type 设置为 application/json，但我只得到 500 状态代码（见下面的屏幕截图）。 API 的所有其他端点都工作得很好，但他们期待“文本/纯文本”......非常感谢任何帮助！

我只是设置了一个简单的按钮来进行 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);
           }
       );
    }
 }

Answer 1

首先，对于您的具体情况，您实际上不需要做任何额外的事情来将请求Content-Type 设置为application/json。这就是 HttpClient 为您开箱即用的东西 for most of the cases。

现在就您的错误而言，这与 CORS 有关。由于这是一个 AJAX 请求，当您的前端应用程序在单独的端口（最有可能是 4200）上运行时，您正在为一个在单独的端口（8080）上运行的 API 发出，浏览器会阻止该请求。

为了允许，它需要在响应标头中使用access-control-allow-origin: *。这是您的浏览器通过首先向 API 发送 OPTIONS 调用来执行的操作。

由于 API 在响应标头中实际上并没有 access-control-allow-origin: *，因此它将被阻止。这正是这里发生的事情。

修复：

由于这是一个 POST API，并且您在本地运行服务器，因此可以安全地假设您可以配置 REST API 服务器以启用 CORS。

如果它是 Express 服务器，您可以使用 cors 中间件在其上启用 CORS。

这里有一个Frontend - Sample StackBlitz 供您参考。

这里有一个Backend - CodeSandbox Sample 供您参考。