react CORS 설정 에러

CORS 설정 에러

test를 위해서 분실물 api에 접근하려 했는데 해당 오류가 발생하면서 거부당했다.

Access-Control-Allow-Origin 에 대한 설정이 되어있지 않아서 그렇다고 한다

설정하는 방법

1. proxy 설정

    // package.json
    {
    	...,
    	// 접근할 도메인
    	"proxy" : "http://locatlhost:3001", 
    	...
    }
   

2. response.header(”Access-Control-Allow-Origin”, “*”) 설정
3. http-proxy-middleware 사용

    // src/setupProxy.js
       
    const { createProxyMiddleware } = require('http-proxy-middleware');
       
    module.exports = function(app){
      app.use(
    		// 어떤것 으로 대체할 것인지
        createProxyMiddleware('/proxy', {
    			// 타겟 url
          target: 'https://apis.data.go.kr',
    			// 해당 장소에 쓰인 경로는 옆에 변수로 대체된다.
          pathRewrite: {
            '^/proxy':''
          },
          changeOrigin: true,
        })
      )
    };
   

4. 백엔드에서 CORS 설정

제일 좋은 방법은 백엔드에서 CORS 설정을 해주는 것이지만 상황이 급하면 package.json에 proxy을 하여 간단하게 설정이 가능하다.
하지만 여러개의 url에 CORS 설정을 하기 위해서는 http-proxy-middleware가 필요하고 3번째 방법을 기억해두고 있는 것이 좋을 듯 하다.