인프런 커뮤니티 질문&답변

 결제 API를 테스트 하던 중 CORS에러를 발견하여 나름대로 수정을 해보려고 했으나.... 헤매고 있어서 질문 드립니다.

우선 에러 메시지가 아래처럼 나왔습니다.(현재 쓰고 있는 에디터가 webstorm이라 혹시나 해서 vscode로 실행했는데요 결국 동일한 에러가 발생했습니다.)

결국 preflight에서 CORS에러가 난건데요.

이를 찾아보니... 프론트/백엔드 모두에서 설정해야 해서 다음과 같이 했습니다.

Front ---------------------------------------------

테스트 해보려고 변수를 하드코딩 했습니다.

axios.defaults.withCredentials = true;
axios.post(
	'http://localhost:3000/graphql',
	// 쿼리 작성
	{
		query: `
			mutation {
				createPointTransaction(impUid: "imp_12345678", amount: 100) {
					id
					impUid
					amount
					status
				}
			}
		`
	},
	// headers
	{
		headers: {
			"Authorization": "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJhNmQ3NjU5Yy05NzA2LTQ4MDgtOTA0OC02ZjI4YWY4NmNhN2UiLCJpYXQiOjE2OTQwNzI1MjQsImV4cCI6MTY5NDA3NjEyNH0.Uch2B5ewPc6yVsy4LuyOJzAUXEhnypbTxKmtQt6hRBw",
		}
	}
)

Backend -------------------------------------------------

main.ts

import { NestFactory } from '@nestjs/core'
import { AppModule } from './app.module'
import { ValidationPipe } from '@nestjs/common'
import { HttpExceptionFilter } from './commons/filter/http-exception.filter'

async function bootstrap() {
    const app = await NestFactory.create(AppModule)
    // cors설정 추가
    app.enableCors()
    app.useGlobalPipes(new ValidationPipe())
    app.useGlobalFilters(new HttpExceptionFilter())
    await app.listen(3000)
}

bootstrap()

제가 찾은 방법은 여기까지 인데요.

다른 방법을 찾지 못해 질문 드립니다.;;;;