http, https 호출 시 Mixed Content 에러

Mixed Content: The page at 'https://어쩌고/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://어쩌고/'. This request has been blocked; the content must be served over HTTPS.

위 에러는 https의 front-end에서 http의 api를 받아오는 과정에서
발생되는 에러이다.

React + vite + axios의 환경에서 vercel로 진행한 front (https)와,
aws ec2로 flask 환경의 api 서버 (http)의 연결법

    if (total_people === '' || isNaN(parseFloat(total_people))) return alert('Input Value Error')
    await axios('http://127.0.0.1:5001/', {
      method: 'POST',
      data: {
        latitude: position.lat.toFixed(5),
        longitude: position.lng.toFixed(5),
        total_people: parseInt(total_people)
      }

위 코드에서는 127.0.0.1:5001로 부터 데이터를 받아온다.
이때 http라 에러가 발생한다.

    if (total_people === '' || isNaN(parseFloat(total_people))) return alert('Input Value Error')
    await axios('/api', {
      method: 'POST',
      data: {
        latitude: position.lat.toFixed(5),
        longitude: position.lng.toFixed(5),
        total_people: parseInt(total_people)
      }

이러한 형식으로 flask를 수정해서 /api 디렉토리를 만들고, 디렉토리 명을 입력한다.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:5001',
        changeOrigin: true,
        secure: false,
        ws: true
      }
    }
  }
})

vite.config.ts에서 위와 같이 /api에 따른 proxy를 세팅한다.

<-- vercel 추가설정 -->
만약 vercel의 경우에는 추가로 vercel.json을 만들어야한다.

{
    "rewrites": [
      { "source": "/api", "destination": "http://127.0.0.1:5001/api" },
      { "source": "/(.*)", "destination": "/index.html" }
    ]
  }