[Flask & NextJS] Cors 문제 해결

Flask로 API를 만들고, API Data를 이용해 NextJS로 데이터를 렌더링하려고 한다.

여기서 항상 발생하는 것은 CORS 문제인데,

백엔드 부분에서 프록시 서버의 헤더를 추가해주면 문제가 쉽게 풀린다.

 

또한, Flask를 사용할 시, Flask_cors를 이용하면 CORS 문제를 쉽게 해결할 수 있다.

 

- flask-server/app.py

from flask import Flask, render_template, jsonify, request
from flask_cors import CORS, cross_origin

app = Flask(__name__)
cors = CORS(app)
app.config['CORS_HEADERS'] = 'Content-Type'

@app.route('/members')
@cross_origin()
def members():
    return {"members": ["Member1","Member2","Member3"]}


if __name__ == '__main__':
    app.run(port=5000, debug=True)

 

- index.tsx

import type { NextPage } from "next";
import Head from "next/head";
import Image from "next/image";
import { useEffect, useState } from "react";
import styles from "../styles/Home.module.css";

const Home: NextPage = () => {
  const [data, setData] = useState([{}]);

  useEffect(() => {
    fetch("http://localhost:5000/members")
      .then((res) => res.json())
      .then((data) => {
        setData(data);
        console.log(data);
      });
  }, []);

  return <div></div>;
};

export default Home;

 

데이터가 CORS 문제 없이 잘 들어온다.