본 기사의 내용

cors란 무엇인가, 문제나 원인, 해결 방법을 기재한 기사입니다.
해결 방법은 여러 가지가 있지만 vercel 배포를 예로 설명합니다.

아젠다

1. 결론
2.cors란?
3. 해결 방법
4.vercel.json의 기재 방법

1. 결론

vercel.json 설정

{
  "rewrites": [
    { "source":  "/dev/api/:path*",
      "destination": "https://リダイレクト先URL/dev/api/:path*"
    }
  ]
}

2. cors란?

cors란?

Cross-Origin Resource Sharing의 약자. 브라우저의 보안 기능으로, 동일 오리진 이외로 데이터를 취득할 수 없게 하는 기능. 오리진은 체계, 호스트, 포트의 조합입니다. 그렇다고는 해도, 오리진이라는 것이 핀과 오지 않는 인용으로, 오리진이 다른 예를 써 둡니다. 아무튼 간단하게 말하면 「정보를 얻을 수 있는 서버」는 하나만이라는 것을 기억해 주세요.

○異なるオリジン
1. スキームが異なる(httpとhttps接続の場合)
  ・http://www.example.com:8080
  ・https://www.example.com:8080
2. ホストが異なる(ドメイン名が異なる場合)
  ・https://www.example.com:8080
  ・https://www.qiita.com:8080
3. ポート番号が異なる
  ・https://www.example.com:8080
  ・https://www.example.com:8081

3. 해결 방법

정식 해결 방법
cors의 허가를 프론트, 서버 모두로 설정한다. 미리 허가된 서버이기 때문에 브라우저의 보안 기능으로부터 회피한다. 본제로부터 벗어날 수 있으므로, 흥미가 있는 분은 아래 기사를 읽어 주세요. htps : // m / t55 / ms / 2154 A8 A8 d8bf1409db2b

브라우저가 잘못 인식하는 솔루션
cors는 「정보를 얻을 수 있는 서버」는 하나가 아니면 브라우저가 허가하지 않기 때문이었습니다.
그러니까, 브라우저에 정보를 얻는 목적지를 하나만이라고 오인식시켜 주면 됩니다.
네, 무슨 말을 하는지, 간단하게 말하면 정적 파일의 호스팅 대상으로 리디렉션하는 것입니다.
자세한 내용은 아래 이미지를 읽고 풀어주세요! ! !


vercel 설정 방법
vercel.json을 만들고 리디렉션 대상 URL을 변경합니다.

{
  "rewrites": [
    { "source":  "/dev/api/:path*",
      "destination": "https://リダイレクト先URL/dev/api/:path*"
    }
  ]
}

리셉션에서 fetch를 쓰는 법
/dev/api/test 액세스를 보내면 https://리디렉션 대상 URL/dev/api/test로 전송됩니다.

fetch('/dev/api/test')
  .then(response => response.json())
  .then(data => console.log(data));