reactjs - React JS API Post 抛出 ERR_ABORTED 415

Question

当我尝试将一些数据保存到本地计算机的 Web 服务中时，App.js 中的请求会给出 net::ERR_ABORTED 415

浏览器控制台

浏览器网络选项卡

应用程序.js

import React, {Component} from 'react';

class App extends Component {
  async postData () {
    try {
      let result = await fetch('http://127.0.0.1:6060/jpa/save', {
        method: 'post',
        mode: 'no-cors',
        headers: {
          'Accept': 'application/json',
          'Content-type': 'application/json',
        },
        body: JSON.stringify({
          name: 'Switch5',
          state: '1'
        })
      });
      console.log(result)
    } catch(e) {
      console.log(e)
    }
  }
  render() {
    return (
      <div className="App">
        <button onClick={ () => this.postData() }>Press me to post some data</button>
      </div>
    );
  }
}

export default App;

如果我使用邮递员，位于我本地机器上的 Web 服务正在运行

---

除此之外，如果我使用 webhook 测试 API，它的工作正常

class App extends Component {
  async postData () {
    try {

      let result = await fetch('https://webhook.site/40336c89-decc-4abc-9e62-9181316a4c85', {
        method: 'post',
        mode: 'no-cors',
        headers: {
          'Accept': 'application/json',
          'Content-type': 'application/json',
        },
        body: JSON.stringify({
          key1: 'myusername'
        })
      });

Answer 1

设法用“axios”发帖

步骤 01：在 App.js 中添加以下内容

axios.post('http://127.0.0.1:6060/jpa/save', {
        name: 'Switch6',
        state: '1'
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });

步骤 02：这是跨域问题。所以将@CrossOrigin添加到Spring Boot Web服务控制器如下

@RequestMapping("jpa")
public class JpaController {
    @Autowired
    private UserJpaRepository userJpaRepository;
    @CrossOrigin
    @PostMapping("save")
    public String saveUser(@RequestBody Switches user) {
        System.out.println("Request came");
        userJpaRepository.save(user);
        return "User Saved";
    }

现在它成功保存数据

Answer 2

我认为问题在于您如何编写获取数据的方法。编辑调用 postData 方法的行。我只编辑了 postData 调用的第一行。

postData = async () => {
try {
  .....
} catch(e) {
  console.log(e)
}
}