React JS API 后抛出 ERR_ABORTED 415

Question

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

浏览器控制台

浏览器网络选项卡

App.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”发帖

Step 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);
      });

Step 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)
}
}

Answer 3

当我尝试将我的 React 应用程序与 spring boot 服务连接时，我遇到了同样的问题。要解决这个问题，只需在你的 fetch 中将模式从 no-cors 更改为 cors 并在你的控制器上添加 @CrossOrigin 注释。

希望有帮助。