I have set up a frontend application (React) and a backend application(Java—Spring Boot) on my droplet. I am running an Nginx webserver with SSL certification.
I can't get my front end to call my back end. I have tried changing the URL to my DNS and different ports. I have also tried HTTP and HTTPS on both the frontend call and the backend corsRegistry.
I feel like it should be easy for my backend and frontend to connect, since they are on the same droplet, but I'm having a very hard time.
#Here is my Backend webConfig:
public class WebConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins(";, "http://localhost:3000")
.allowedMethods("GET", "POST", "PUT", "DELETE")
.allowCredentials(true);
}
}
#Here is my docker-compose file:
version: '3.8'
services:
web:
build:
context: .
dockerfile: Dockerfile
ports:
- "80:80"
- "443:443"
volumes:
- /etc/letsencrypt/live/www.pligtlisten.dk/fullchain.pem:/etc/letsencrypt/live/www.pligtlisten.dk/fullchain.pem:ro
- /etc/letsencrypt/live/www.pligtlisten.dk/privkey.pem:/etc/letsencrypt/live/www.pligtlisten.dk/privkey.pem:ro
restart: unless-stopped
#Here is my docker file:
FROM node:18-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
#Here is my nginx server settings:
server {
listen 80;
server_name www.pligtlisten.dk pligtlisten.dk;
return 301 $request_uri;
}
server {
listen 443 ssl;
server_name www.pligtlisten.dk pligtlisten.dk;
ssl_certificate /etc/letsencrypt/live/www.pligtlisten.dk/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/www.pligtlisten.dk/privkey.pem;
ssl_protocols TLSv1.2 TLSv1.3;
ssl_prefer_server_ciphers on;
ssl_ciphers EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH;
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
}
#This is the url i am using right now from frontend to reach backend:
export const BASE_URL = "https://161.35.196.6:8080";
export const GOOGLE_ACCOUNT_ENDPOINT = `${BASE_URL}/googleAccount`;
export const POINT_SCORE_ENDPOINT = `${BASE_URL}/pointScore`;