Client CORS 문제 해결

에러

Access to XMLHttpRequest at '주소' 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.

 

package.json 에 "proxy" 하고 api 요청을 받아오는 서버쪽 호스트 주소를 넣어주면 된다

예를 들어 api 주소가  https://yts.torrentbay.to/api/v2/ 라면

{ /* package.json */
...
"proxy" : "https://yts.torrentbay.to/"
}

하고 api 요청하는 쪽에는 /api/v2/ ~~ 하고 남은 url 을 적어주면 된다.

 

캐시가 남아있어 제대로 동작하지 않을 수 있으므로 node_modules, package-lock.json 지우고 다시 npm run start 하면 제대로 동작할 것이다.

 

다른 해결방법으로 axios.defaults.withCredentials = true; 가 있었는데 나는 제대로 동작하지 않았다

 

참조

https://nyang-in.tistory.com/237

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