whdudev

[auctify] Mixed Content 경고 본문

PROJECT

[auctify] Mixed Content 경고

whdudev 2025. 6. 8. 10:11

 

✅ 문제 상황

localhost/:1 Mixed Content: The page at 'https://localhost:3000/' was loaded over HTTPS, but requested an insecure EventSource endpoint 'http://a~~~~~~n'. This request has been blocked; the content must be served over HTTPS.

사용자가 https인데 http url로 요청을 보내려고해서 발생하는 에러이다. 

 

현 프로젝트에서는 API는 https로 구성되어 있는데 http 리소스를 요청 보내는 경우가 있는걸로 파악

 

 

 

✅ 해결 

import type { Metadata } from 'next';
import '@fontsource/pretendard';
import '@fontsource/roboto';
import '@/app/globals.css';

import Providers from '@/app/providers';
import Header from '@/shared/ui/header/Header';
import { LoadDaumPostcodeScript } from '@/app/providers/LoadDaumPostcodeScript';

export const metadata: Metadata = {
  title: 'Auctify - 실시간 경매 플랫폼',
  description: '실시간 경매 플랫폼',
  icons: {
    icon: '/images/favicon.ico',
    shortcut: '/images/favicon-32x32.png', // 북마크 아이콘
    apple: '/images/apple-touch-icon.png', // iOS 및 macOS Safari용 아이콘
  },
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <meta
        httpEquiv="Content-Security-Policy"
        content="upgrade-insecure-requests"
      />
      <body className="font-sans flex flex-col">
        <LoadDaumPostcodeScript />
        <Header />
        <div className="flex-1 overflow-auto">
          <Providers>{children}</Providers>
        </div>
      </body>
    </html>
  );
}

 

 

 

html 태그 내부에 meta데이터 코드 추가

        <meta
          httpEquiv="Content-Security-Policy"
          content="upgrade-insecure-requests"
        />

 

HTTPS 사이트에서 모든 리소스를 HTTPS로 통일하려고 할 때 사용. 

주의점 : 외부 리소스가 HTTPS를 지원하지 않는다면 -> 리소스 로드 실패가 발생할 수 있습니다. 

'PROJECT' 카테고리의 다른 글

스프링 프로젝트 패키지 구조  (2) 2025.07.03
[auctify] Nginx 리버스 프록시일 경우 SSE연결 오류 해결  (0) 2025.04.30
[이론] 결제 시스템  (0) 2025.03.20
[auctify]POSTMAN 쿠키로 넣어서 요청 보내기  (0) 2025.03.11
[Error] [OAuth2.0구현 과정에 발생한 문제] 쿠키가 공유가 안 되요! CORS, Domain문제  (0) 2025.03.07
'PROJECT' Related Articles more