当前位置: 首页 > 知识库问答 >
问题:

使用Fetch API javascript将Content-Type设置为应用程序/Json

沃弘图
2023-03-14

我试图使用javascript中的Fetch API向spring应用程序发送一些表单数据。我有以下代码来发送表单数据:

document.querySelector('#formPet').addEventListener('submit', event => {
    event.preventDefault();
    let email= document.querySelector("#email");
    fetch('http://localhost:8080/petForm/'+email.value+'/pets', {
      method: 'POST',
      body: JSON.stringify({
        help: "helpme:("
      })
    })
  });

但是我得到一个415状态错误“不支持的媒体类型”。即使我将标头“Content-Type”专门设置为“Application/json”,它也会像“text/平原”一样发送

fetch('http://localhost:8080/petForm/'+email.value+'/pets', {
      method: 'POST',
      header: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        help: "helpme:("
      })
    })
  });

这是我从服务器得到的响应:

以下是在Spring中接受请求的方法:

    @PostMapping("petForm/{id}/pets")
    public ResponseEntity<Pet> createPet(@PathVariable("id") String ownerId, @RequestBody Map<String, Object> data){
        System.out.println(data);
        return ResponseEntity.ok().build();
    }

我不知道为什么请求是以“text/plain”格式发送的,我在postman中尝试了Spring方法,当我以json格式发送数据时,一切正常。

共有2个答案

澹台逸明
2023-03-14
step 1 : add @CrossOrigin after @PostMapping(value = "petForm/{id}/pets")

like : 



@PostMapping(value = "petForm/{id}/pets")
    @CrossOrigin
    public ResponseEntity<String> createPet(@PathVariable("id") String ownerId, @RequestBody Map<String, Object> data){
        System.out.println(data);
        return ResponseEntity.ok().build();
    }


step 2 : add double quotes to help word
 it is not  json fromat :====>    help: "helpme" 
Correct : 
      it is not  json fromat :====>    "help": "helpme" 
巫经义
2023-03-14

在您的JavaScript代码中,您需要使用“标头”而不是“标头”。请参阅获取API留档:https://developer.mozilla.org/en-US/docs/Web/API/fetch

 类似资料:
  • 当我尝试将content-type设置为时,我会丢失边界,并在响应中得到一个错误: 添加UTF-8字符集的正确方法是什么?

  • RESTAPI在映射到Java对象时采用输入内容类型:application/x-www-form-urlencoded,如 在表单输入请求中,我正在设置my_name和my_phone的值,但MyRequest对象的myName和myPhone为null。 我正在使用Jackson annotations 2.3 jar 有什么建议吗?可能有什么问题?

  • 问题内容: 我想上网本REST API,它接受三个参数: ,, 我做它像这样在AngularJS为: 但是我总是这样: 对象{数据:“ {”结果“:”假“}”“,状态:200,配置:对象,状态文本:”确定“,标头:功能} 要么 {“ data”:“ {\” result \“:\” false \“}”,“状态”:200,“ config”:{“方法”:“ POST”,“ transformReq

  • 问题内容: 我正在尝试编写一个AngularJS资源模块,它将一些数据发布到服务器。默认的内容类型似乎是“ application /xml”。我试图将内容类型覆盖为“ application / x-www-form-urlencoded”。当执行普通的$http.post()时,我可以设置内容类型,当我检入Firebug时,可以看到设置正确。当我使用资源的POST方法时,无法获得要从默认值更改

  • 设置应用程序 Nest is built with features from both ES6 and ES7 (decorators, async / await). It means, that the easiest way to start adventure with it is to use Babel or TypeScript. In this tutorial I will u

  • 我有两个Spring开机Rest服务。一个是json内容的生产者,另一个是消费者。 生产者关于控制器动作的相关代码如下: 在消费者Spring Boot服务代码中,我使用resTemplate调用这个endpoint并获得结果。如果您注意到上面的生产者代码,那么在RequestMapping属性中没有produces=“application/json”。但是,我在响应头中确实有Content-t