[CORS] react & flask - Access to XMLHttpRequest at 'http://localhost:8080/' from origin 'http://localhost:3000' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when ..

 

최근 ReactJS로 웹 페이지를 만들고있다.

이 웹 페이지는 파일을 업로드하는 기능이 있는데, 업로드 과정에서 CORS 에러가 발생됐다.

React는 localhost:3000을 사용하고 flask는 localhost:8080 포트를 사용한다.

 

굳이 node.js를 사용하지 않고 flask를 사용한 이유는, AI 모델과 연동이 되기 때문에 python 기반의 서버로 구축하는 것이고

django에 비해 구축이 가벼워서 채택했다.

 

 

[문제 발생]

react(localhost:3000)  post-> flask(localhost:8080)

Access to XMLHttpRequest at 'http://localhost:8080/test' from origin 'http://localhost:3000' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

 

한동안 유니티3D 위주의 일을 하다보니, CORS 에러를 오랜만에 보게 됐다. 반갑다.

 

 

 

[해답]

 

먼저 프론트에서

axios를 사용했기 때문에 withCredentials을 아래 와같은 방법으로 추가해준다.

추가 방법은 다양하다.

// react

// http-common.ts
import axios from 'axios';

axios.defaults.withCredentials = true;	// < -- 추가

export default axios.create({
  baseURL: "http://localhost:8080",
  headers: {
    "Content-type": "application/json"
  },
  withCredentials: true	// < -- 추가
});


// upload.ts

http.post(
	"/test", 
    data, 
    {withCredentials: true} // < -- 추가
);

 

백엔드에서

마찬가지로 CORS를 가져와 적용시키고 withCredentials를 추가해준다.

# app.py
from flask_cors import CORS	# <-- 추가

app = Flask(__name__)

# 추가
CORS(
	app, 
    resources={r'*': {'origins': 'http://localhost:3000'}}, 
    supports_credentials=True)

 

 

 

[결과]

이제 정상적으로 실행 된다.