프록시 백엔드를 사용자 정의하여 CORS 우회

프런트엔드 개발자의 경우 다음과 같은 CORS 오류가 발생할 수 있습니다.Access to XMLHttpRequest at 'https://...' from origin 'https://...' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

콕스 안내

분명히 Cross-Origin Resource Sharing는 웹 브라우저가domain2에서 온 데이터에 접근할 수 있도록 하는 보안 메커니즘이다.com 도메인 이름 찾기 1.일반 도메인 이름 형식.또한 미리 정의된 도메인에 대한 액세스를 제한하는 데도 사용할 수 있습니다.기본적으로 백엔드와 프런트엔드가 같은 서버에 있거나 백엔드에 접근할 수 있는 허용 소스를 특별히 설정해야 한다.
CORS는 기본적으로 비활성화되어 있으며 서버 측 코드에 액세스할 수 있는 권한이 있는 경우ways to enable it입니다.만약 당신이 백엔드 개발자가 있는 학교 그룹 프로젝트에서 반드시 그에게/그녀가 CORS를 사용하도록 일깨워 주어야 한다. 그렇지 않으면 당신은 모의 데이터에 걸릴 수도 있다. (경험적으로 말하자면)

영감.

토요일 밤, 나는 대학 프로젝트의 브라우저 컨트롤러에서 처음으로 빨간색 CORS 오류를 만났다. 당시 나는 자바 스프링 백엔드에 연결하려고 했지만, 포스트맨에서 일하지만, 그것을 일하게 할 수 없었다.자바 (특히 Spring) 는 나에게 거의 고대 그리스어이기 때문에, 나는 이 오류를 빙빙 돌려보는 방법을 시도하고 싶다.CORS는 브라우저 레벨에 있기 때문에 간단한 (r) JS 백엔드를 구축하지 않고 같은 API 요청을 실행하지만 CORS를 사용하면 원본 자바 백엔드가 아니라 연결할 수 있다는 생각이 떠올랐다.

빠른 백엔드

Express.js가 첫 번째 노드입니다.내가 만난 js 웹 프레임워크는 이 임무에 매우 적합하다.우리는 가장 작은 node/express 백엔드 프로그램을 만들 것입니다. 이 프로그램은 axios http 라이브러리로 사용되고 cors 패키지를 사용하여 서버에서 CORS를 사용합니다. (그렇지 않으면 전체 과정이 무의미할 것입니다.)

프로젝트 설정 및 패키지 설치

프로젝트의 폴더를 만든 후 터미널을 열고 그것을 탐색합니다.우리는 가장 기본적인 가방을 초기화했다.띠다

npm init -y

완료되면 필요한 패키지를 설치합니다.

npm i express cors axios

인코딩을 시작하기 전에 실행할 파일이 필요합니다.흔히 볼 수 있는 이름은server.js 또는app.js이다.이 프로젝트는 모든 코드를 한 파일에 넣기 때문에 (최선의 실천은 아니지만 시범적인 목적에서) 우리는 간단하게 사용할 수 있다. index.js파일을 작성하고 패키지를 수정합니다.json 파일입니다. 따라서 스크립트 키는 다음과 같습니다.

 "scripts": {
    "start": "node index"
  },

인코딩 시간

마지막으로, 인코딩할 때가 됐어요!index.js (또는 당신이 이전에 말한 모든 것) 을 열면 서버를 만들 수 있습니다.나는 여기에 필요한 모든 코드와 줄마다 주석을 복사할 것이다.

// packages import
const express = require("express");
const app = express();
const cors = require("cors");
const axios = require("axios");
// enable CORS
app.use(cors());
// set the port on which our app wil run
// important to read from environment variable if deploying
const port = process.env.PORT || 5000;

// basic string route to prevent Glitch error
app.get("/", (req, res) => {
    res.send("Hello World!");
});

// the route we're working with
app.get("/users", (req, res) => {
    // replace with a custom URL as required
    const backendUrl = "https://jsonplaceholder.typicode.com/users";
    // return the data without modification
    axios.get(backendUrl).then(response => res.send(response.data));
});

// console text when app is running
app.listen(port, () => {
    console.log(`Server listening at http://localhost:${port}`);
});

이렇게!예를 들어, 상기 코드를 사용하여 Glitch 에 업로드할 수 있으며, 전방 프로그램을 배치하면 이 코드를 위탁 관리하고 접근할 수 있습니다.이것이 바로 환경 변수 (사용 가능한 경우) 에서 포트를 읽고 간단한 문자열을 되돌릴 루트를 설정해야 하는 이유입니다. 그렇지 않으면 Glitch에서 프로그램에 오류가 있다고 생각할 것입니다. 아무런 내용도 되돌려주지 않았기 때문입니다."/users" 라우팅에는 CORS 액세스가 설정되어 있지 않고 수정되지 않은 동일한 데이터가 반환된 백엔드에 연결하는 데 필요한 마스터 코드가 포함되어 있습니다.

추가 이점: 데이터 수정

데이터를 원래대로 되돌릴 수 있지만, 원본 응답을 수정하여 전방 응용 프로그램의 요구에 더욱 적합하게 할 수 있는 것은 아무것도 없습니다.대량의 데이터와 수정이 필요하다면, 전방 응용 프로그램이 저속 장치와 느린 연결에서 성능을 향상시킬 수 있다. 왜냐하면 수신된 소음 데이터가 더욱 적고 클라이언트가 필요로 하는 수정도 적기 때문이다.
원래 백엔드 API의 응답 예:

이 코드 세션을 수정하는 것은 매우 간단합니다. (응답이 위와 같은 데이터 구조를 가지고 있다고 가정합니다.)

    axios.get(backendUrl).then(response => {
        const lastEpisodes = response.data.data.lastAvailableEpisodes;
        const shows = lastEpisodes.map(episode => ({
            id: episode.contentItemId,
            title: episode.caption,
            audioFile: episode.audio.metadata[0].path
        }));
        res.send(shows);
    });

수정된 사용자 정의 API 응답 예:

나는 너도 두 번째 대답이 더욱 명확하고 이해하기 쉽다는 것에 동의할 것이라고 믿는다.

결론

이것은 매우 기본적인 예로, 사용자가 일반적으로 접근할 수 있는 CORS 제한 내용을 돌아갈 수 있는 맞춤형, 기본적인 백엔드를 에이전트로 사용할 수 있다.이른바 즐거움의 경로를 따르는 것은 잘못된 처리가 없다는 뜻이지만 주제에 영향을 미친다.프로젝트 창설, 응답 수정, 배치, 고장 발생까지의 전체 과정은 10분도 안 될 수 있습니다. 이것은 백엔드 개발자가 영감이 사라진 다음날 아침에 깨어나기를 기다리는 것보다 훨씬 빠릅니다.