java - 如何将React端口更改为API端口？

Question

我设计了一个登录页面来使用react。它在 3000 个端口上运行。点击登录按钮后，应进入API端口并检查用户名和密码是否已登录。

Screen shot

这是 API 调用:

@RestController
@RequestMapping("/api")
public class UserController {

    @Autowired
    UserRepository userRepository;

    @GetMapping("/users")
    public List<Users> getAllUsers() {
        return userRepository.findAll();
    }

    @PostMapping("/users")
    public Users createUser(@Valid @RequestBody Users note) {
        return userRepository.save(note);
    }


    @PostMapping("/userlogin/{id}")
    public Users getUserById(@Valid @RequestBody UserLogin userLogin) {
        System.out.println(userLogin.getUserId());
        System.out.println(userLogin.getPassword());
        if (userLogin.getUserId() != null) {
            Users user = userRepository.findUserById(userLogin.getUserId());
            if (user != null) {
                if ((userLogin.getPassword()).equals(user.getPassword())) {
                    return user;
                }
            }
        }
        return new Users();
    }

}

这是调用 api 端口的 React 代码:

公共(public)静态saveLogin(输入:任意){

var obj = JSON.stringify(input);
var url = '/api/userlogin/';
if (input.userId !== null && input.userId !== "") {
    url = '/api/userlogin/' + input.userId;

    const resultMethod = axios.post(url, obj,
        {
            headers: {
                'Content-Type': 'application/json'
            }
        })
        .then(res => {

            return res;
        }).catch((e: any) => {

            return e.response;
        });
    return resultMethod;
}

post 方法应该调用 8095 端口，但它正在 3000 端口。

Answer 1

axios 需要完整的 api url。

url = 'http://localhost:8095/api/userlogin/' + input.userId;