0

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("https://www.pligtlisten.dk", "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 https://www.pligtlisten.dk$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`;
2
  • If you're use the IP address in the URL, like https://161.35.196.6:8080, then there's no server name in the request for Nginx to route on. You need to use an URL like https://www.pligtlisten.dk:8080/ so you'll match the server_name in your Nginx config. Or manually add a Host header to the request. Commented Mar 14 at 16:33
  • I am still getting Cross-Origin-Opener-Policy policy would block the window.postMessage call and net::ERR_SSL_PROTOCOL_ERROR on the frontend. But I have also not set my backend to https so maybe that would help? Commented Mar 15 at 19:40

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.