首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >角8 HttpClient后请求内容.类型崩溃

角8 HttpClient后请求内容.类型崩溃
EN

Stack Overflow用户
提问于 2019-10-06 04:07:06
回答 1查看 4.9K关注 0票数 1

我不知道这是什么交易,希望有人能给我一些帮助!

我试图向后端API发布一个帖子,但是我得到了415个状态代码,因为内容类型是以“text/平原”的形式发送的,但是这个端点需要application/json。我想可能是API,但是文章在PostMan中运行得很好(见下面的截图)。

我尝试在请求头中手动将内容类型设置为application/json,但我只得到了一个500状态代码(参见下面的屏幕快照)。API的所有其他端点都运行得很好,但是他们期待“文本/纯文本”...any帮助是非常感谢的!

我只是设置了一个简单的按钮来发布:

代码语言:javascript
运行
复制
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);
           }
       );
    }
 }

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-10-06 05:06:38

首先,对于您的具体情况,您实际上不需要做任何额外的事情来将请求Content-Type设置为application/json。这是HttpClient为你做的事情,在大多数情况下

就您的错误而言,这与CORS有关。由于这是为运行在单独端口(8080)上的API而发出的AJAX请求,而前端应用程序则运行在单独的端口上(很可能是4200),因此浏览器将阻止该请求。

为了允许,它需要响应头中的access-control-allow-origin: *。这是浏览器首先通过向API发送OPTIONS调用来实现的。

因为API在响应头中没有真正的access-control-allow-origin: *,所以它将被阻塞。这正是这里发生的事。

FIX:

因为这是POST API,并且您在本地运行服务器,所以可以安全地假设您可以配置REST服务器来启用CORS。

如果它是一个快速服务器,您可以使用cors中间件在其上启用CORS。

这是一个供您参考的前端-样本StackBlitz。 这是一个供您参考的后端- CodeSandbox示例

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/58254119

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档