CORS에 대해서 아시는 게 있을 것 같아요.

만약 나와 마찬가지로, 처음으로 CORS (또는 크로스 자원 공유) 를 만났을 때, 서버로 하여금 빌어먹을 aax 요청을 받아들이고 그것을 완성하게 하고 싶을 뿐이다.그래서 Stack overflow에 가서 코드 세션을 복사해서 제목을 설정하는 데 성공했습니다.
하지만 네가 알고 싶은 게 몇 가지 있을 거야.

CORS란 무엇인가, 아니면 무엇인가?
신출내기에게 이것은 종종 곤혹의 근원이다. 왜냐하면 CORS가 무엇을 실현해야 할지 아직 분명하지 않기 때문이다.우선, CORS 자체는 안전 조치가 아니라 실제적으로 정반대이다. CORS는'동원 정책'을 회피하는 방법이다. 이 정책은 안전 조치로서 사용자가 서로 다른 지역에 aax 요청을 보내는 것을 방지한다.
동원 정책은 한 지역의 사이트가 다른 지역에 xhr 요청을 할 수 없도록 규정하고 있다.이는 악성 사이트가 이미 알고 있는 사이트(예를 들어 페이스북이나 구글)에 가입해 이를 모의할 수 있도록 요청하는 것을 방지할 수 있다.
이 정책은 브라우저에 의해 이루어진 것이다. (모두 SOP을 실현한다. 비록 약간의 차이가 있지만, 이것은 서버나 다른 HTTP 클라이언트 (예를 들어 cURL이나 POSTman) 가 보낸 요청에 적용되지 않는다는 것을 의미한다.그 밖에 서버는 이것에 대해 통제권이 전혀 없다. 서버는 신뢰를 받는 영역에서 온 것처럼 모든 요청을 처리하고 브라우저가 요청을 막는다.
SOP는 공격자가 서버에 요청하는 것을 막는 것을 의미하지 않습니다. (공격자가 분명히 브라우저를 사용하지 않기 때문입니다.)이것은 단지 신용이 좋은 브라우저를 사용하는 합법적인 사용자가 모르는 상황에서 귀하의 사이트에 요청을 하는 것을 방지하기 위해서입니다.
현재, CORS는 SOP를 돌아다니는 방법입니다. 어떤 경우, 특정한 사이트가 서버에 요청을 할 수 있도록 허용하기를 원합니다. 설령 그것이 통상적으로 막히더라도.(일반적으로 프런트엔드 애플리케이션이 API에 요청할 수 있음)

CORS가 어떻게 작동하는지
CORS는 HTTP의 다른 부분과 마찬가지로 기본적으로 브라우저와 서버 간의 대화입니다.가령 당신의 전단이domain-a.com에 있고 API가domain-b.com에 있다면 다음과 같습니다.
- Browser: "헤이, Domain-B, Domain-A.com에 있는 이 스크립트는 aax에 대한 검색을 요구하지만, 문제가 없다고 말하지 않는 한 막아야 합니다."
- 서버: "몰라요. 하지만 https://domain-a.com만 GET, POST, OPTIONS, DELETE 요청을 할 수 있어요. 10분마다 검증해야 해요.
브라우저가 혼잣말로 말했다. "네, 정확한 도메인 이름입니다. 요청을 보내겠습니다!"
- 브라우저: "헤이,domain-b, 이 지점에 글을 올리고 싶어요.
종업원:그럼요. 200달러예요.
또는 사용자가 다른 도메인에 있으면 다음과 같이 대화가 더 짧아집니다.
- Browser: "헤이,domain-b.com, 악의적인 영역에 있는 이 스크립트는 aax에 대한 검색을 요구하지만, 문제가 없다고 알려주지 않는 한 막아야 합니다."
- 서버: "몰라요. 하지만 https://domain-a.com만 GET, POST, OPTIONS, DELETE 요청을 할 수 있어요. 10분마다 검증해야 해요.
브라우저가 중얼거렸다. "아, 이것은 정확한 영역이 아닙니다. 그 요청을 하지 않는 것이 좋습니다."라고 말한 다음 컨트롤에서 계속 오류를 보내는 것이 좋습니다.

브라우저의 모양새
내 위의 작은 장면에서 브라우저의 첫 번째 문제는 비행 전 요청이라고 하는데 그에 상응하는 HTTP 동사는OPTIONS이다.서버는 항상 200 응답을 사용하여 비행 전 요청에 응답해야 한다. 이 응답은 본문은 없지만 Access-Control-Allow-Origin 과 일부 다른 제목을 포함한다.예제에서 제목은 다음과 같습니다.

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://domain-a.com
Access-Control-Allow-Methods: GET, POST, OPTIONS, DELETE
Access-Control-Max-Age: 3600

이것은 브라우저에domain-A.com으로부터의 요청만 실행할 수 있으며 GET, POST, OPTIONS 또는 DELETE 요청만 실행할 수 있으며 (예를 들어 한 요청PUT은 차단될 수 있으며 이 정보를 3600초 동안 캐시할 수 있어 매번 새로운 요청OPTIONS을 할 필요가 없다는 것을 알려준다.

물론 우리가 다른 분야에 있다면 통하지 않을 것이다.브라우저에서 요청OPTIONS이 전송되고 콘솔에서 오류가 발생하며 요청이 전송되지 않음POST:

아주 직설적이죠?
네, 함정이 있는 것 말고는...

CORS 관련 불만 사항

모든 응답에는 CORS 제목이 포함되어야 합니다.
서버가 200과 정확한 제목으로 옵션 요청에 대답하면 삭제되고 브라우저가 옵션 요청을 보내고 실제 요청을 보내고 참패하는 것을 볼 수 있다고 생각할 수도 있습니다.각 요청(GET, POST 또는 기타)에도 동일한 액세스 제어 허용 헤드가 포함되어야 하기 때문입니다.

모든 요청이 비행 전 요청을 촉발하는 것은 아니다
GET 요청이나 Content-Type 헤드가 application/x-www-form-urlencoded로 설정된 POST 요청과 같이 비행 전 요청을 트리거하지 않는 요청이 몇 개 있습니다.이것들은 모두 브라우저가 줄곧 허용해 온 '간단한 요청' (CORS가 존재하기 전까지도 서로 다른 사이트에서 링크를 만들거나 폼을 발표할 수 있음) 이다. 당신은 완전한 목록을 찾을 수 있다. here
POST 요청의 경우 결과는 약간 직감에 어긋납니다. 브라우저가 POST 요청을 보낼 것입니다. (따라서 서버가 일부 데이터를 보존할 수 있습니다.) 그리고 응답을 무시합니다.
전통적인 웹 응용 프로그램에서 application/json 를 내용 유형으로 사용하기 때문에 비행 전 요청이 있을 수 있습니다. 그러나 서버가 다른 영역에서의POST 요청을 받을 수 있으므로 맹목적으로 받아들이지 마십시오.

허용되는 도메인에는 프로토콜이 있어야 합니다.mydomain.com 를 하나의 영역으로만 사용할 수 없습니다. 프로토콜을 포함해야 합니다. (예: https://mydomain.com흥미로운 것은 http와https를 동시에 받아들일 수 없다는 것이다. 왜냐하면...

하나의 도메인만 허용할 수 있습니다.
도메인당 Access-Control-Allow-Origin: * 또는 하나만 사용할 수 있습니다.이것은api에 접근할 수 있는 몇 개의 필드가 필요하다면 스스로 처리해야 한다는 것을 의미한다.
이 문제를 처리하는 가장 간단한 방법은 서버에서 허용된 필드 목록을 유지하는 것입니다. 필드가 이 목록에 있으면 헤더의 내용을 동적으로 변경합니다.다음은 일반 PHP의 모양입니다. 예를 들면 다음과 같습니다.

$allowedDomains = [
    "http://www.mydomain.com",
    "https://www.mydomain.com",
    "http://www.myotherdomain.com",
    "http://www.myotherdomain.com",
];

$originDomain = $_SERVER['HTTP_ORIGIN'];

if (in_array($originDomain, $allowedDomains)) {
    header("Access-Control-Allow-Origin: $originDomain");
};

노드에서js (개편 this SO anwser)

app.use(function(req, res, next) {
  const allowedOrigins = [
    "http://www.mydomain.com",
    "https://www.mydomain.com",
    "http://www.myotherdomain.com",
    "http://www.myotherdomain.com",
  ];
  const origin = req.headers.origin;
  if(allowedOrigins.indexOf(origin) > -1){
    res.setHeader('Access-Control-Allow-Origin', origin);
  }
  return next();
});

동원 정책은 Firefox의 파일 시스템이 아닌 Chrome와 Safari의 파일 시스템에 적용됩니다.
로컬 파일에 요청을 하면 Firefox는 항상 같은 필드에 있다고 생각하고 허용합니다.크롬이나 Safari 같은 Webkit 기반 브라우저는 보안 위험으로 여겨지고 로컬 파일에 대한 aax 조회를 막을 수 있습니다.이 문제를 해결하는 유일한 방법은 Firefox를 사용하거나 Access-Control-Allow-Origin: * 헤더를 보낼 웹 서버를 설치하는 것이다.
댓글에서 지적한 바와 같이, 당신은 --disable-web-security 로고로 크롬을 시작할 수 있습니다.

iOS WKWebview에 CORS 필요
웹뷰 (Cordova나 Ionic) 를 사용하는 모바일 앱을 개발하고 있다면, 안드로이드는 당신에게 아무런 번거로움도 주지 않지만, iOS의 새로운 WKWebview는 CORS가 필요할 것입니다.이것은 Access-Control-Allow-Origin 제목을 * 으로 항상 설정해야 한다는 것을 의미합니다. 이것은 정말 이상적이지 않습니다.
다른 선택은 프로그램에서 aax 요청을 보내지 않고,cordova 플러그인을 사용하여 이 컴퓨터의 http 요청을 보내는 것입니다. 이것은 동원 정책을 무시하는 것을 기쁘게 할 것입니다.
읽어주셔서 감사합니다!
CORS를 더 깊이 있게 설명하려면 MDN:https://developer.mozilla.org/docs/Web/HTTP/CORS을 방문하십시오.