[오류노트] Mixed Content: The page at ~

Mixed Content: The page at 'https://flowdnskk.duckdns.org/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://localhost:8080/fileList'. This request has been blocked; the content must be served over HTTPS.

problem

프론트 ( NEXTJS) 와 백엔드 ( Spring Boot ) 의 서버를 구동시키고,

외부의 요청을 NginX 에서 -> NEXTJS -> Spring Boot 로 보내주려고 하는데 

위와 같은 에러가 떳다.

처음엔 같은 인스턴스 (서버) 내에 있으니 localhost:8080으로 보내주어도 상관 없을 줄 알았다.

하지만 이것은 틀렸다 !!

//Spring Boot Web Config
@Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins(
                        "http://privateIP:8080",
                        "http://localhost:8080"
                )
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowedHeaders("*")
                .allowCredentials(true);
    }

---

solution

Mixed Content: The page at 'https://dns주소.co.kr/' was loaded over HTTPS,

"Mixed content"란 웹 페이지가 보안 연결(HTTPS)을 통해 로드되었지만,

페이지 내의 일부 리소스(예: 이미지, 스크립트, 스타일시트 등)가 보안되지 않은 연결(HTTP)을 통해 로드될 때 발생하는 문제를 말한다

백엔드도 SSL 을 사용하여 https 로 요청을 할 수 있게 만들어야 한다.

백엔드 endpoint 를 추가해준다

# cd /etc/nginx/conf.d/sudosoo.conf
server {
    server_name sudosoo.duckdns.org;

    location / {
        proxy_pass http://localhost:3000; # 프론트 서버
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
    }

    location /api/ {
        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;
    }

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/sudosoo.duckdns.org/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/sudosoo.duckdns.org/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot


}
server {
    if ($host = sudosoo.duckdns.org) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    listen 80;
    server_name sudosoo.duckdns.org;

    location / {
            root /home/ubuntu/flowSource/frontEnd/.next;
            index index.html index.html;
            try_files $uri $uri/ /index.html;
    }
    return 404; # managed by Certbot
}