[FE] Refactor : CORS 코드 수정

- CORS 미들웨어에 config를 사용하여 origin 명시
- 요청 헤더에 필요없는 헤더들 삭제 (서버단에서 CORS 처리 해줬으므로)

Author: sang-gyeong

backend/src/app.ts

@@ -43,8 +43,14 @@ const startApp = async (): Promise<void> => {
     app.use(bodyParser.json());
     app.use(bodyParser.urlencoded({ extended: false }));
     app.use(morgan('dev'));
-    // TODO: 허용할 주소 정확히 명시하기
-    app.use(cors());
+
+    const options = {
+      origin: process.env.SERVICE_URL,
+      credentials: true,
+    };
+
+    app.use(cors(options));
+
     app.use(passport.initialize());
     passportConfig();
 

frontend/src/api/index.ts

@@ -2,13 +2,6 @@ import axios from 'axios';
 
 const api = axios.create({
   baseURL: process.env.NEXT_PUBLIC_API_BASE_URL,
-  headers: {
-    // 'Access-Control-Allow-Origin': '*',
-    'Access-Control-Allow-Credentials': 'true',
-    'Access-Control-Allow-Methods': 'GET, POST, PATCH, DELETE, PUT, OPTIONS',
-    'Access-Control-Allow-Headers':
-      'Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With',
-  },
   validateStatus(status) {
     return status < 500;
   },

frontend/src/hooks/useFetch.ts

@@ -4,11 +4,8 @@ const useFetch = (url, token) => {
   const options = {
     method: 'GET',
     headers: {
-      Accept: 'application/json',
-      'Content-Type': 'application/json;charset=UTF-8',
       Authorization: token,
     },
-    credentails: 'true',
   };
   const fetcher = endpoint =>
     fetch(process.env.NEXT_PUBLIC_API_BASE_URL + endpoint, options).then(res => res.json());

settings.json

@@ -1,6 +1,6 @@
 {
-  "editor.formatOnSave": false,
+  "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   }
-}
+}