CORS 문제를 지금 영구적으로 해결하는 방법(2022)

CORS 문제를 영구적으로 해결하는 방법을 배우고 싶다면 어떤 유형의 웹 앱을 구축하고 있든 상관없이 잘 찾아오셨습니다!

프런트 엔드 전용 JavaScript 앱(React, Vue 또는 Angular)

아래 코드와 같이 클라이언트 측 앱에서 Google Maps API와 같은 외부 서버 API에서 일부 데이터를 가져오고 싶다고 가정해 보겠습니다.

fetch("https://maps.googleapis.com/maps/api/place/details/json?place_id=ChIJryijc9s0K4gRG9aU7SDTXdA&key=[YOUR_API_KEY]")
.then(response => {
   console.log(response);
})

위의 코드를 실행하면 CORS 오류가 발생합니다.

If you want to know the what, why and how about CORS, check this out.

신속하게 수정하려면 공용 CORS 프록시 서버 중 하나를 사용하십시오.

이 예제에서는 Heroku CORS 프록시 서버를 사용합니다.

API URL에 프록시 서버를 추가합니다.

https://cors-anywhere.herokuapp.com

Heroku CORS 프록시 URL을 추가한 후에도 403 금지 오류가 발생할 수 있습니다.



이 문제를 해결하려면 아래 URL로 이동하여 Heroku 프록시 서버에 대한 임시 액세스를 요청해야 합니다.

https://cors-anywhere.herokuapp.com/corsdemo

Node.js 서버 측 전용 웹 앱

클라이언트가 아닌 서버에서 외부 서버 API(제 경우에는 Google Maps API 사용)에 HTTP 요청을 하는 경우 CORS 오류를 처리하는 데 아무런 문제가 없습니다. HTTP 요청.

체크아웃Up and Running With NodeJS Express App In A Minute (2022)

const { default: axios } = require('axios');
const express = require('express');
const app = express();

app.get("/", (req, res) => {
    axios.get('https://maps.googleapis.com/maps/api/place/details/json?place_id=ChIJryijc9s0K4gRG9aU7SDTXdA&key=[YOUR_API_KEY]')
        .then(function (response) {
            res.send(response.data);
        })
        .catch(function (error) {
            console.log(error);
        });
});

app.listen(3000);

클라이언트-서버 앱

프런트 엔드 앱과 서버 측 API를 분리하는 웹 앱을 빌드할 때 CORS 문제를 해결하는 방법에 대해 이야기해 보겠습니다.

localhost:3000에서 실행 중인 서버측 코드에 Google Maps API 요청을 유지합니다.

그런 다음 클라이언트에서 가져오기 요청의 URL을 Google Maps API URL에서 localhost:3000으로 변경합니다.

fetch("http://localhost:3000/")
.then(response => {
   console.log(response);
})

그리고 이전과 동일한 CORS 오류가 발생합니다.

좋은 소식은 CORS 오류가 Google Maps API와 같은 타사 서버 대신 localhost:3000에서 실행 중인 자체 서버에서 발생하여 백엔드에서 코드를 변경할 수 있는 제어 권한이 없다는 것입니다.

이 문제를 해결하려면 액세스 권한을 부여하려는 클라이언트 측 URL을 전달하는 서버 측 앱에 Access-Control-Allow-Origin이라는 응답 헤더를 추가해야 합니다.

제 경우에는 localhost:5501 또는 127.0.0.1:5501에서 클라이언트 측 앱을 실행하고 있습니다.

즉, 다른 클라이언트 웹 앱은 서버를 사용하여 외부 API 데이터(이 경우 Google Maps API)를 가져올 수 없습니다. 이는 기본적으로 Heroku과 같은 타사 서버를 사용하는 대신 자체 CORS 프록시 서버를 생성했음을 의미합니다. .

app.get("/", (req, res) => {
     ...
     .then(function (response) {
        res.header("Access-Control-Allow-Origin", "http://localhost:5501"); // update to match the domain you will make the request from
        res.send(response.data);
      })
     ...
});

이렇게 하면 CORS 오류를 영구적으로 수정하고 다시는 볼 수 없습니다.

전개

맞춤 도메인에 대해 걱정하지 않는다면 Firebase와 같은 서비스를 사용하여 클라이언트 및 서버 측 앱을 무료로 빠르게 배포할 수 있습니다.

프런트 엔드 배포의 경우 Firebase hosting 을 사용할 수 있습니다.

Node.js 앱 배포의 경우 코드를 Firebase Cloud Function으로 이동하고 배포할 수 있습니다.

질문이나 우려 사항이 있는 경우 아래 의견란에 알려주십시오.

읽어 주셔서 감사합니다.