만약 express에서 CORS 오류가 발생하면 cors로 해결합시다

개시하다

모든 시작은 잘못이다.
Access to XMLHttpRequest at ' http://localhost:3065/user ' from origin ' http://localhost: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.
그러니까 이번에는 그 얘기를 하자.

1. CORS

먼저 CORS부터 시작합니다.
CORS는 "Cross-origin resource sharing"의 약칭입니다.직역하면 "Cross-origin 자원 공유"같은 거죠.이것Cross-origin이 뭔지 몰라서 찾아봤어요.

URL 구성을 그림으로 간단하게 표현했다.Protocol, Host, Port Number 세 부분의 origin을 포함하여 각양각색이다.
만약 이 세 개가 모두 같다면, 그것은 같은 오리진(same-origin)이고, 이 세 개 중 어느 것이 다르면 다른 오리진(cross-origin)이다.코르스는 서로 다른 오리온자리에서도 자원을 공유한다는 뜻이다.
더 정확한 정의는MDN에 대한 설명이다.
추가된 HTTP 헤더를 사용하여 브라우저가 특정한 원작에서 실행되는 웹 응용 프로그램에 서로 다른 원작에서 선택한 자원에 대한 접근권을 부여하는 구조를 표시합니다

2. CORS 및 SOP

인터넷 세계에는 서로 다른 사냥꾼자리 간의 자원 공유에 관한 두 가지 정책이 있다.하나는 방금 설명한 CORS이고, 다른 하나는 SOP입니다.
SOP는 Same-Origin Policy의 약자로 말 그대로 같은 오리지널 인재만 자원을 공유할 수 있는 정책이다.
그러나 인터넷 세계에서 서로 다른 오리지널 자원으로부터 자원(외부 API 사용 등)을 빈번하게 가져오기 때문에 완전한 제한은 어렵다.따라서 몇 가지 예외를 제외하고 예외라면 사냥꾼자리마다 방문이 허용된다.
예외 중 하나는 CORS 정책을 보호하는 자원 요청입니다.
Generally, reading information from another origin is forbidden. However, an origin is permitted to use some kinds of resources
...
Network resources can also opt into letting other origins read their information, for example, using Cross-Origin Resource Sharing [CORS]. In these cases, access is typically granted on a per-origin basis.
부터RFC 6454 - 3.4.2 Network Access
서로 다른 오리온에 자원 요청을 보내면 SOP 위반이고, 예외적인 CORS 정책을 지키지 않으면 서로 다른 오리온에서 온 자원은 사용할 수 없다.
정말 귀찮지만 이런 안전정책이 없으면 누구나 내 사이트를 방문해 함부로 떠들기 때문에 성실하게 지켜야 한다.

3. 잘못된 이유

그럼 처음에 잘못된 이유를 말해 보세요.이것은 브라우저에서 백엔드 서버로 요청을 보내는 중 발생한 오류입니다.내용을 자세히 살펴보니 "http://localhost:3000에 보내진http://localhost:3065/user 방문이 CORS 정책에 의해 차단됐다"고 적혀 있었다.
눈치챘어?예, 포트 번호가 다릅니다.

클라이언트의 포트 번호는 3000이고 백엔드 측의 포트 번호는 3065이기 때문에 서로 다른 오리지널이다.여기서는 이미 SOP를 위반했는데도 코르스 보호 정책에 가담하지 않아 제동이 걸렸다.
🤔 왜 눌렀어?
CORS 정책은 브라우저에 대한 정책입니다.브라우저가 올리브유를 비교해서 다르면 차단한다.하지만 서버는 상관없고 사냥꾼자리가 다르면 정상적으로 처리된다.같은 이유로 서버 간에 접근할 때 사냥꾼자리가 달라도 CORS 오류가 발생하지 않는다.

4. 해결:머리글 추가

그럼 CORS 정책 준수 처리에 동참합시다.잘못된 정보는 나에게 어떻게 해야 좋을지 친절하게 알려 주었다.
No 'Access-Control-Allow-Origin' header is present on the requested resource
요청하신 자원Access-Control-Allow-Origin에 눈썹이 없어서 화가 났으니 넣으면 됩니다.

router.get('/', (req, res) => {
    try {
	res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000')
        res.status(201).send('ok')
    } catch (error) {
        console.error(error)
    }
})

초단순 샘플 코드.setHeader에 Access-Control-Allow-Origin 페이지의 눈썹을 추가하고 http://localhost:3000의 값을 입력했습니다.이렇게 하면 http://localhost:3000 방문을 허용한다는 것을 의미한다.
참고로, http://localhost:3000 대신 * 쓰면, 모든origin에 접근할 수 있음을 의미합니다.개발할 때는 수월하지만 안전성이 위험하니 포기하는 것이 좋다.
만약 이렇게 눈썹을 직접 추가하는 방법이라면, 모든 응답 논리는 이 코드를 하나하나 써야 한다.귀찮아요.

5. 해결:미들웨어

express라면 중간부품으로 CORS를 설정하는 것이 비교적 쉽다.그 중간부품의 이름도 cors (헷갈리기 쉽다) 이다.npm install cors 명령을 통해 간단히 설치할 수 있습니다.

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());

설치cors, app.js에 상기 코드를 추가한 후 응답 논리에 일일이 쓸 필요가 없어 가벼워졌다.
그러나 cors()처럼 함수의 숫자를 비우면 모든origin 접근을 허용한다는 뜻이기 때문에 위험하다.디테일은 설정이 필요합니다.
설정 가능

app.use(cors({
    origin: 'http://localhost:3000', //アクセス許可するオリジン
    credentials: true, //レスポンスヘッダーにAccess-Control-Allow-Credentials追加
    optionsSuccessStatus: 200 //レスポンスstatusを200に設定
}))

등.더 많은 다양한 설정은 참고하세요공식 문서.
나는 이렇게 해서 CORS 실수에서 해방되었다.

끝맺다

이번에는 아주 간단하게 정리했는데 이것도 찾아보면 무한한 내용이 나올 것 같아서 공부했어요.CORS 솔루션에는 Proxy 등 다양한 기능이 포함되어 있습니다.
제가 먼저'백엔드 서버도 같은 포트 번호로 하면 되지 않나요?'그래서 나는 고객과 마찬가지로 수정3000을 했는데 결국 그에게 욕을 먹었다Port 3000 is already in use..