Cors에러_미들웨어 코드 위치 문제

CORS 미들웨어 위치 확인

CORS 미들웨어는 다른 모든 라우터와 미들웨어보다 먼저 정의되어야 합니다. 기존 코드를 다시 확인하고, CORS 설정이 가장 먼저 적용되는지 확인해보세요.

 

cors에러가 발생한 코드(cors 미들웨어 설정이 밑에 작성되어 있음)

import express, { Express, Request, Response } from "express";
import cors from "cors";
import { Pool } from "pg";
import cookieParser from "cookie-parser";
import userRouter from "./routes/users";

const app: Express = express();
const port = 5000;

// 라우터 임포트
app.use("/api/users", userRouter);

// Postgre DB 연결
const pool = new Pool({
  user: "postgres",
  host: "localhost",
  database: "members",
  password: "smile",
  port: 5432,
});

const queryDatabase = async () => {
  const client = await pool.connect();
  try {
    const res = await client.query("SELECT * FROM users");
    console.log(res.rows);
  } finally {
    client.release();
  }
};

queryDatabase();

let corsOptions = {
  origin: [
    "http://127.0.0.1:3000",
    "http://127.0.0.1:3000/checkscore",
    "http://localhost:3000",
  ],
  credentials: true,
  optionsSuccessStatus: 200,
};

// 미들웨어
app.use(cors(corsOptions));
app.use(express.json());
app.use(cookieParser());

 

Access to fetch at 'http://127.0.0.1:5000/api/users/' from origin 'http://127.0.0.1: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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

 

cors가 제대로 설치가 안된건지, origin 설정문제인지, 프론트 측에서 fetch설정을 잘못한건지, tsconfig module설정의 문제인지 쌩쑈를 다했는데, 미들웨어 설정위치가 밑에 있어서 그런 것이다... 이 기본적인 것을 인지하지 못하다니

 

cors에러가 해결된 코드(cors 미들웨어 설정이 최상단에 작성되어 있음)

import express, { Express, Request, Response } from "express";
import cors from "cors";
import { Pool } from "pg";
import cookieParser from "cookie-parser";
import userRouter from "./routes/users";

const app: Express = express();
const port = 5000;

// cors설정이 미들웨어 최상단에 있어야한다
let corsOptions = {
  origin: [
    "http://127.0.0.1:3000",
    "http://127.0.0.1:3000/checkscore",
    "http://localhost:3000",
  ],
  credentials: true,
  optionsSuccessStatus: 200,
};

// 미들웨어
app.use(cors(corsOptions));
app.use(express.json());
app.use(cookieParser());

// 라우터 임포트
app.use("/api/users", userRouter);

// Postgre DB 연결
const pool = new Pool({
  user: "postgres",
  host: "localhost",
  database: "members",
  password: "smile",
  port: 5432,
});

const queryDatabase = async () => {
  const client = await pool.connect();
  try {
    const res = await client.query("SELECT * FROM users");
    console.log(res.rows);
  } finally {
    client.release();
  }
};

queryDatabase();