개발환경에서 CORS 에러 관련 프록시 설정

• 프론트 : localhost:3000 띄워서 로컬에서 개발
• API서버(백) : http://~.com dev서버를 올려서 해당 dev 서버에 요청

 

• 브라우저에서 보내는 요청 → CORS 발생
  • 브라우저는 localhost:3000을 달고 있는데, 다른 주소(API서버)로 부터 온 응답값을 허용하지 않음 (동일출처가 아니기 때문)
• 해결책 : 브라우저에서 나가는 요청을 API 서버 주소로 둔갑시킨다
  • proxy 설정

 

• http-proxy-middleware 패키지 설치
• src/setupProxy.js
  • api/ 로 시작하는 요청 url 인 경우 설정한 target 주소에서 요청하는 것으로 둔갑해줌
  • /api 부분은 빠져야 하므로 pathRewrite 도 시켜준다

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = (app) => {
    app.use(createProxyMiddleware('/api', {
        target: 'http://myservices.com',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
    })
    );
}

• api 요청 부

import axios from 'axios';

export const postLogin = ({ id, password }) => {
	return axios.post('/api/auth/access_token', {
		id,
		password,
	});
};

https://12716.tistory.com/entry/ReactJS-CORS이슈-해결을-위한-Proxy-설정

[ReactJS] CORS이슈 해결을 위한 Proxy 설정

 

 

운영에 프론트를 배포하고 나서 동일한 코드가 어떻게 동작하는 지 확인

일단 운영에서는 프록시 설정이 작동하지 않는다

http-proxy-middleware 패키지는 자동으로 개발환경에서만 작동하도록 세팅되어있다

 

운영환경에서는 그럼 CORS 에러가 발생하지 않는가?

 

기본적으로 알고 있어야할 개념이 있다

서브 도메인(Sub Domain)

서브 도메인은 보조 도메인으로써, URL로 전송하거나 계정 내의 IP 주소나 디렉토리로 포워딩되는 도메인 이름의 확장자이다.

예를들어 네이버는 여러 서비스들을 아래와 같은 서브도메인을 통해 사용자가 접근할 수 있도록 한다.

• 네이버 블로그 : blog.naver.com
• 네이버 메일 : mail.naver.com
• 네이버 금융 : finance.naver.com
• https://app.jakearchibald.com
• https://other-app.jakearchibald.com

프론트 주소가 myapp.com 

API 서버 주소가 api-myapp.com

 

위와 같으면 CORS 발생하지 않음

 

당연히 이런 개념을 알고, 주소를 팠겠거니,,, 한다면,

운영에서는 

 

 

Proxy 설정

• 로컬 개발에서 설정
  1. 프록시 (/api) 로 설정
     • login.js : axios 요청부

     import axios from 'axios';
     
     export const postLogin = ({ id, password }) => {
     	return axios.post('/api/auth/access_token', {
     		id,
     		password,
     	});
     };
     

     • setupProxy.js
       • 프록시 설정에서 target 값을 주면 axios 에서 baseURL 설정을 안해도 됨

     const { createProxyMiddleware } = require('http-proxy-middleware');
     
     module.exports = function (app) {
     	app.use(
     		'/api',
     		createProxyMiddleware({
     			target: 'http://myapp-api.myapp.com/>',
     			changeOrigin: true,
     			pathRewrite: { '^/api': '' },
     		})
     	);
     };

     • 결과
       • 서버로 요청이 정상적으로 갔고, 서버로부터 응답을 받음
       • Request URL : localhost:3000/api/auth/access_token

 => 로컬) 요청 → localhost:3000 → 프록시 서버 → 프록시에 설정한 target 서버로 요청

 

 

 

 

2. 프록시('/api/~') 설정 + axios baseURL 변경

• login.js

export const postLogin = ({ id, password }) => {
	return axiosInstance.post('/auth/access_token', {
		id,
		password,
	});
};

• axiosInstanse.js

const axiosInstance = axios.create({
	baseURL: 'http://myapp-api.myapp.com',
	headers: {
		'Content-Type': 'application/json',
	},
});

• setupProxy.js

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function (app) {
	app.use(
		'/api',
		createProxyMiddleware({
			target: 'http://myapp-api.myapp.com/>',
			changeOrigin: true,
			pathRewrite: { '^/api': '' },
		})
	);
};

• 결과
  • 서버로부터 정상(여기서는 401이 정상임, 잘못된 계정을 입력했기 때문에 unauthorized, 내가 받고싶었던 응답) 응답을 받음

• 의문점 : 근데 /api~로 시작을 안했는데.. CORS 가 어떻게 통과 되었는가?
• 로컬에서 프록시 설정을 빼보자-> 잘됨... 백엔드에서 전체 받아주는거로 처리했나..?

 

 

백에서 처리를 해주었다면, 프론트에서 프록시 처리하지말고, 그냥 axios baseURL 만 바꺼서 보내면 된다

 

 

•