[React] React CORS 오류 (Access to XMLHttpRequest at '' from origin '' has been blocked by CORS policy~)

---

Access to XMLHttpRequest at '주소A' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

리액트로 api를 받아와서 post 요청을 보내는 중에 위와 같은 오류가 나타났다. CORS 문제라고 한다.

✔️ 해결방법

1. package.json 코드 추가

나는 찾아가야 하는 url이 localhost:3000/user/login 였고, 뒤에 user/login 은 서버에서 정해준 경로였다 다음과 같이 작성해준다

{
	"proxy": "http://localhost:3000"
}

 

2. http 요청하는 파일에서 경로 수정

다시 작업하던 파일로 돌아가서

const apiURL = "http://localhost:3000/user/login";

 

원래 이렇게 되어있던 경로를

const apiURL = "/user/login";

proxy에 써놓은거는 지우고 이렇게 수정해준다!

---

끄읏- ^0^

reference
https://snowdeer.github.io/openshift/2020/06/13/react-for-cors-using-proxy/