使用 Spring Boot REST API 后端部署 React 前端时出现 HTTP ERROR 405

Question

我开发了一个 Spring boot REST API 后端和 React 前端，想部署到 Heroku 云，但失败了无数次。

后端控制器：

@CrossOrigin(origins = "*", maxAge = 3600)
@RestController
@RequestMapping(
        path = "/api/auth",
        consumes = { MediaType.APPLICATION_JSON_VALUE },
        produces = { MediaType.APPLICATION_JSON_VALUE }
)
@RequiredArgsConstructor(onConstructor=@__(@Autowired))
public class UserRegisterRestController {

    private final AppUserRoleRepository roleRepository;

    private final AppUserRepository userRepository;

    private final EmailService emailService;


    @PostMapping("/signup")
    public ResponseEntity<?> registerUser(
            @Valid @RequestBody UserSignupRequest signUpRequestUser,
            HttpServletRequest request
    ) throws AuthenticationFailedException {

        // Some logic goes here
    }

    // Other endpoints skipped for brevity ;-)
    
}

前端反应组件：

import React from "react";
import { useForm } from "react-hook-form";
import { Link } from "react-router-dom";

const UserSignup = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
    reset,
    trigger,
  } = useForm();

  const onSubmit = async (data) => {
    const { name, email, age, address, contact, city, gender, role } = data;
    console.log(data);
    reset();
    console.log(name, ", ", email);
    try {
      const res = await fetch("/auth/signup", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          username: name,
          gender: gender,
          email: email,
          age: age,
          contact: contact,
          address: address,
          city: city,
          role: [role],
        }),
      });

      const res_data = await res.json();
      console.log("responsedata => ", res_data);

    } catch (err) {
      console.log(err);
    }
  };

  return (
    <>
       // Some HTML elements/other stuff goes here
    </>
  );
};

export default UserSignup;

前端 React package.json：

{
  "name": "somegreatproject",
  "version": "0.1.0",
  "private": true,
  "proxy": "https://somegreatproject.herokuapp.com/api",
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-hook-form": "^7.20.2",
    "react-router-dom": "^5.3.0",
    "react-scripts": "4.0.3",
    "start": "^5.1.0",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

前端 React 构建文件：

前端 React 构建文件放置在后端项目静态文件夹/目录中：

好的，此时项目部署到heroku，我访问链接例如：

https://somegreatproject.herokuapp.com/api/auth/signup

它显示：

问题是我的构建过程中缺少某些步骤吗？或者反应代理和组件获取uri/url有什么问题吗？请帮我解决这个问题。提前致谢。

Answer 1

尝试改变

const res = await fetch("/auth/signup", {...}

到

const res = await fetch("/api/auth/signup", {...}