I created a application, which consists of a reactjs frontend and a spring boot app as backend. Working well on local environment; I have created a build for the react send it to the vm, the springboot , i have also sent to the vm. I am using nginx the app reverse proxy the app.
on the frontend i am having this error below.
Failed to load resource: the server responded with a status of 405 (Not Allowed)
LoginPage.jsx:40 bt code : “ERR_BAD_REQUEST” config : {transitional: {…}, adapter: Array(3), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …} message : “Request failed with status code 405” name : “AxiosError” request : XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …} response : {data: ‘\r\n405 Not Allowed</head…disable MSIE and Chrome friendly error page → \r\n’, status: 405, statusText: ‘Not Allowed’, headers: Xt, config: {…}, …} stack : “AxiosError: Request failed with status code 405\n at rn (React App)\n at XMLHttpRequest.g (React App)\n at Hn.request (React App)\n at async Jn.login (React App)\n at async onSubmit (React App)” [[Prototype]]
GNU nano 6.2 /etc/nginx/sites-available/default server {
listen 80;
server_name finecloud.co.zw www.finecloud.co.zw;
# Location of React frontend files
root /home/azureuser/zviriko/build;
index index.html;
# Serve the React frontend
location / {
try_files $uri $uri/ /index.html;
}
# Proxy for Spring Boot backend (assumes backend is running on localhost:8080)
location / {
proxy_pass http://localhost:8080/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
# CORS and other headers (optional)
add_header Access-Control-Allow-Origin "http://finecloud.co.zw";
add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS";
add_header Access-Control-Allow-Headers "Authorization, Content-Type";
}
package com.phegondev.usersmanagementsystem.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class CorsConfig {
@Bean
public WebMvcConfigurer webMvcConfigurer(){
return new WebMvcConfigurer() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedMethods("GET", "POST", "PUT", "DELETE")
.allowedOrigins("http://finecloud.co.zw");
}
};
}
}
:
Error`import axios from "axios";
class UserService{
static BASE_URL = "http://finecloud.co.zw";
static async login(email, password){
try{
const response = await axios.post(`${UserService.BASE_URL}/auth/login`, {email, password})
return response.data;
}catch(err){
throw err;
}
}
static async register(userData, token){
try{
const response = await axios.post(`${UserService.BASE_URL}/auth/register`, userData,
{`enter code here`
headers: {Authorization: `Bearer ${token}`}
})
return response.data;
}catch(err){
throw err;
}
}
static async getAllUsers(token){
try{
const response = await axios.get(`${UserService.BASE_URL}/admin/get-all-users`,
{
headers: {Authorization: `Bearer ${token}`}
})
return response.data;
}catch(err){
throw err;
}
}
static async addPayment(paymentData, token) {
try {
const response = await axios.post(`${UserService.BASE_URL}/adminuser/add-payment`, paymentData, {
headers: { Authorization: `Bearer ${token}` }
});
return response.data;
} catch (err) {
throw err;
}
}
static async getYourProfile(token){
try{
const response = await axios.get(`${UserService.BASE_URL}/adminuser/get-profile`,
{
headers: {Authorization: `Bearer ${token}`}
})
return response.data;
}catch(err){
throw err;
}
}
static async getUserById(userId, token){
try{
const response = await axios.get(`${UserService.BASE_URL}/admin/get-users/${userId}`,
{
headers: {Authorization: `Bearer ${token}`}
})
return response.data;
}catch(err){
throw err;
}
}
// added this new
static async searchUsers(query, token) {
try {
const response = await axios.get(`${UserService.BASE_URL}/adminuser/search`, {
params: { query },
headers: { Authorization: `Bearer ${token}` }
});
return response.data;
} catch (err) {
throw err;
}
}
static async deleteUser(userId, token){
try{
const response = await axios.delete(`${UserService.BASE_URL}/admin/delete/${userId}`,
{
headers: {Authorization: `Bearer ${token}`}
})
return response.data;
}catch(err){
throw err;
}
}
static async updateUser(userId, userData, token) {
try {
const response = await axios.put(`${UserService.BASE_URL}/admin/update/${userId}`, userData, {
headers: { Authorization: `Bearer ${token}` }
});
return response.data;
} catch (err) {
console.error('Error in updateUser service:', err.message);
throw err;
}
}
/**AUTHENTICATION CHECKER */
static logout(){
localStorage.removeItem('token')
localStorage.removeItem('role')
}
static isAuthenticated(){
const token = localStorage.getItem('token')
return !!token
}
static isAdmin(){
const role = localStorage.getItem('role')
return role === 'ADMIN'
}
static isUser(){
const role = localStorage.getItem('role')
return role === 'USER'
}
static adminOnly(){
return this.isAuthenticated() && this.isAdmin();
}
}
export default UserService;