programing

'액세스-컨트롤-오리진 허용' 헤더의 작동 방식은 무엇입니까?

bestprogram 2023. 6. 6. 10:26

'액세스-컨트롤-오리진 허용' 헤더의 작동 방식은 무엇입니까?

분명히, 저는 그것의 의미를 완전히 오해했습니다.저는 이런 생각을 했습니다.

  1. 에서 JavaScript 코드 MyCode합니다.http://siteA기원
  2. MyCode.js의 응답 헤더에는 Access-Control-Allow-Origin:이 포함되어 있습니다. 이는 MyCode.js가 사이트 B에 대한 교차 오리진 참조를 허용한다는 것을 의미한다고 생각했습니다.
  3. 는 MyCode, 이 기능은 "MyCode.js", "Code.js"에 합니다.http://siteB교차 검색 요청임에도 불구하고 괜찮을 것입니다.

음, 제가 틀렸어요.이것은 전혀 이렇게 작동하지 않습니다.그래서 저는 Cross-Origin 자원 공유를 읽고 w3c 추천으로 Cross-Origin 자원 공유를 읽으려고 했습니다.

한 가지 확실한 것은 이 헤더를 어떻게 사용해야 하는지 아직도 모르겠습니다.

저는 A 사이트와 B 사이트를 모두 완전히 제어합니다.A 사이트에서 다운로드한 JavaScript 코드가 이 헤더를 사용하여 B 사이트의 리소스에 액세스할 수 있도록 하려면 어떻게 해야 합니까?

추신: 저는 JSONP를 이용하고 싶지 않습니다.

액세스 제어 허용 오리진은 CORS(크로스 오리진 리소스 공유) 헤더입니다.

사이트 A가 사이트 B에서 콘텐츠를 가져오려고 할 때 사이트 B는 액세스-제어-허용-오리진 응답 헤더를 보내 이 페이지의 콘텐츠가 특정 오리진에 액세스할 수 있음을 브라우저에 알릴 수 있습니다. (오리진은 도메인, 구성표 및 포트 번호)기본적으로 사이트 B의 페이지는 다른 오리진에 액세스할 수 없습니다. Access-Control-Allow-Origin 헤더를 사용하면 특정 요청 오리진에 의해 교차 오리진에 액세스할 수 있습니다.

사이트 B가 사이트 A에 액세스할 수 있도록 하려는 각 리소스/페이지에 대해 사이트 B는 응답 헤더로 페이지를 제공해야 합니다.

Access-Control-Allow-Origin: http://siteA.com

최신 브라우저는 도메인 간 요청을 즉시 차단하지 않습니다.사이트 A가 사이트 B에서 페이지를 요청하면 브라우저는 실제로 네트워크 수준에서 요청된 페이지를 가져오고 응답 헤더가 사이트 A를 허용된 요청자 도메인으로 나열하는지 확인합니다.사이트 B가 사이트 A가 이 페이지에 액세스할 수 있음을 표시하지 않은 경우 브라우저는XMLHttpRequest의error요청하는 JavaScript 코드에 대한 응답 데이터를 이벤트하고 거부합니다.

단순하지 않은 요청

네트워크 수준에서 발생하는 작업은 위에서 설명한 것보다 약간 더 복잡할 수 있습니다.요청이 "단순하지 않은" 요청인 경우, 브라우저는 먼저 데이터가 없는 "사전 비행" OPTIONS 요청을 발송하여 서버가 요청을 수락하는지 확인합니다.다음 중 하나(또는 둘 다)에 해당하는 경우 요청이 간단하지 않습니다.

  • GET 또는 POST 이외의 HTTP 동사 사용(예: PUT, DELETE)
  • 비임의 요청 헤더를 사용합니다. 단순 요청 헤더는 다음과 같습니다.
  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type은 그 이 (이은그값다때단만순합다니일음이것▁its▁(다니이▁(단합▁is▁simple)일 만 간단합니다.application/x-www-form-urlencoded,multipart/form-data또는text/plain)

가 OPTIONS 헤더OPTIONS 헤더)로 .Access-Control-Allow-Headers머리글이 simple헤드가헤경우의더,Access-Control-Allow-Methods비동사 및/또는 비동사 헤더와 일치하는 비동사의 경우, 브라우저는 실제 요청을 보냅니다.

가 사트A가에 대한 합니다./somePage가 아닌 Content-Type의 값application/json브라우저가 먼저 비행 전 요청을 보냅니다.

OPTIONS /somePage HTTP/1.1
Origin: http://siteA.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: Content-Type

:Access-Control-Request-Method그리고.Access-Control-Request-Headers는 브라우저에 의해 자동으로 추가되므로 추가할 필요가 없습니다. OPTIONS 헤더를 . OPTIONS 프리응헤가져다옵니를더이답인적성공플라이.

Access-Control-Allow-Origin: http://siteA.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type

실제 요청을 보낼 때(사전 비행이 완료된 후) 동작은 단순 요청을 처리하는 방법과 동일합니다.단순 , 즉, 사비이성즉단인지순않처게리다니됩동하일함청요과은하야단순전해송요은청공여히적전서는전버행, 즉▁still▁send,▁whose▁in야함▁(처니▁a됩다즉(i▁the▁is▁must리).Access-Control-Allow-Origin실제 응답의 경우 다시).

브라우저가 실제 요청을 보냅니다.

PUT /somePage HTTP/1.1
Origin: http://siteA.com
Content-Type: application/json

{ "myRequestContent": "JSON is so great" }

그리고 서버는 다음과 같은 정보를 보냅니다.Access-Control-Allow-Origin단순한 요청의 경우와 마찬가지로:

Access-Control-Allow-Origin: http://siteA.com

단순하지 않은 요청에 대한 자세한 내용은 CORS를 통한 XMLHttpRequest 이해를 참조하십시오.

공유 - 교차오리스유공소진리▁- -CORS(A.K.A. Cross-Domain AJAX 요청)는 대부분의 웹 개발자가 직면할 수 있는 문제이며, Same-Origin-Policy에 따르면 브라우저는 보안 샌드박스에서 클라이언트 JavaScript를 제한합니다. 일반적으로 JS는 다른 도메인의 원격 서버와 직접 통신할 수 없습니다.과거에 개발자들은 교차 도메인 리소스 요청을 달성하기 위해 많은 까다로운 방법을 개발했는데, 가장 일반적으로 사용되는 방법은 다음과 같습니다.

  1. 원격과 통신하려면 Flash/Silverlight 또는 서버 측을 "프록시"로 사용합니다.
  2. 패딩이 있는 JSON(JSONP).
  3. iframe에 원격 서버를 포함하고 fragment 또는 window.name 를 통해 통신합니다. 여기를 참조하십시오.

그러한 까다로운 방법들은 다소 문제가 있습니다. 예를 들어, JSONP는 개발자들이 단순히 "평가"하면 보안 구멍이 발생할 수 있으며, 위의 #3은 작동하지만 두 도메인 모두 서로 간에 엄격한 계약을 구축해야 합니다. 유연하지도 않고 우아한 IMHO:)

W3C는 이 문제를 해결하기 위한 안전하고 유연하며 권장되는 표준 방법을 제공하기 위한 표준 솔루션으로 CORS(Cross-Origin Resource Sharing)를 도입했습니다.

메카니즘

높은 수준에서 우리는 단순히 CORS를 도메인 A의 클라이언트 AJAX 호출과 도메인 B에서 호스팅되는 페이지 간의 계약으로 간주할 수 있으며, 일반적인 교차 오리진 요청/응답은 다음과 같습니다.

도메인 AAJAX 요청 헤더

Host DomainB.com
User-Agent Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0) Gecko/20100101 Firefox/4.0
Accept text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8,application/json
Accept-Language en-us;
Accept-Encoding gzip, deflate
Keep-Alive 115
Origin http://DomainA.com

도메인 B 응답 헤더

Cache-Control private
Content-Type application/json; charset=utf-8
Access-Control-Allow-Origin DomainA.com
Content-Length 87
Proxy-Connection Keep-Alive
Connection Keep-Alive

위에 표시한 파란색 부분은 커널 팩트입니다. "Origin" 요청 헤더는 "cross-origin 요청 또는 prefly 요청이 어디에서 발생했는지 나타냅니다." "Access-Control-Allow-Origin" 응답 헤더는 이 페이지가 도메인 A의 원격 요청을 허용함을 나타냅니다(값이 *이면 도메인의 원격 요청을 허용함을 나타냅니다).

위에서 언급했듯이, W3는 브라우저가 실제로 Cross-Origin HTTP 요청을 제출하기 전에 "사전 요청"을 구현할 것을 권장했습니다. 즉, HTTP입니다.OPTIONS요청:

OPTIONS DomainB.com/foo.aspx HTTP/1.1

foo.aspx가 OPTIONS HTTP 동사를 지원하는 경우 다음과 같은 응답을 반환할 수 있습니다.

HTTP/1.1 200 OK
Date: Wed, 01 Mar 2011 15:38:19 GMT
Access-Control-Allow-Origin: http://DomainA.com
Access-Control-Allow-Methods: POST, GET, OPTIONS, HEAD
Access-Control-Allow-Headers: X-Requested-With
Access-Control-Max-Age: 1728000
Connection: Keep-Alive
Content-Type: application/json

응답에 "Access-Control-Allow-Origin"이 포함되고 값이 "*"이거나 CORS 요청을 제출한 도메인이 포함된 경우에만 이 필수 조건 브라우저를 충족하여 실제 교차 도메인 요청을 제출하고 결과를 "Preflight-Result-Cache"에 캐시합니다.

저는 3년 전에 CORS에 대해 블로그에 올렸습니다: AJAX 크로스 오리진 HTTP 요청.

이 Mozilla Developer Network 기사에 따르면,

리소스는 첫 번째 리소스 자체가 서비스하는 도메인 또는 포트가 아닌 다른 도메인 또는 포트에서 리소스를 요청할 때 교차 오리진 HTTP 요청을 만듭니다.

여기에 이미지 설명 입력

제공된 HTML 페이지http://domain-a.com을 만듭니다.<img> src »http://domain-b.com/image.jpg오늘날 웹의 많은 페이지는 CSS 스타일 시트, 이미지 및 스크립트와 같은 리소스를 별도의 도메인에서 로드합니다(따라서 멋져야 합니다).

동일 원산지 정책

보안상의 이유로 브라우저는 스크립트 내에서 시작된 교차 오리진 HTTP 요청을 제한합니다.예를들면,XMLHttpRequest그리고.Fetch같은 정책을 펴다그래서, 웹 애플리케이션은 다음을 사용합니다.XMLHttpRequest또는Fetch자체 도메인에만 HTTP 요청을 할 수 있습니다.

교차 오리진 리소스 공유(CORS)

웹 애플리케이션을 개선하기 위해 개발자들은 브라우저 공급업체에 도메인 간 요청을 허용할 것을 요청했습니다.

CORS(Cross-Origin Resource Sharing) 메커니즘은 웹 서버에 도메인 간 액세스 제어를 제공하여 도메인 간 데이터를 안전하게 전송할 수 있도록 합니다.최신 브라우저는 다음과 같은 API 컨테이너에서 CORS를 사용합니다.XMLHttpRequest또는fetch교차 발신 HTTP 요청의 위험을 완화합니다.

CORS 작동 방식(액세스-컨트롤-오리진 허용 헤더)

위키백과:

CORS 표준은 브라우저와 서버에 권한이 있을 때만 원격 URL을 요청할 수 있는 방법을 제공하는 새로운 HTTP 헤더를 설명합니다.

서버에서 일부 유효성 검사 및 권한 부여를 수행할 수 있지만, 일반적으로 이러한 헤더를 지원하고 헤더에 적용되는 제한을 준수하는 것은 브라우저의 책임입니다.

예

  1. 브라우저가 다음을 전송합니다.OPTIONS 합니다.Origin HTTP표제의

이 헤더의 값은 상위 페이지에 서비스를 제공한 도메인입니다.가 때시될의 페이지가 때.http://www.example.com에서 service.example.com는 " 음요헤다전송니다됩로음으가다더"로 전송됩니다.service.example.com:

Origin: http://www.example.com
  1. 에 있는 service.example.com다음과 같이 응답할 수 있습니다.

  • 안 안Access-Control-Allow-Origin허용되는 오리진 사이트를 나타내는 응답의 (ACAO) 헤더.예:

    Access-Control-Allow-Origin: http://www.example.com

  • 서버가 교차 오리진 요청을 허용하지 않는 경우의 오류 페이지

  • 안 안Access-Control-Allow-Origin된 () 헤더:

    Access-Control-Allow-Origin: *

제가 CORS에 대해 생각하기 시작할 때마다, 당신이 질문에서 설명한 것처럼 헤더를 호스팅하는 사이트에 대한 제 직관은 부정확합니다.저는 같은 원산지 정책의 목적에 대해 생각하는 것이 도움이 됩니다.

동일한 보안 정책의 목적은 사용자가 siteB.com 와만 공유하도록 선택한 개인 정보에 액세스하는 siteA.com 의 악성 JavaScript로부터 사용자를 보호하는 것입니다.동일한 정책이 없다면, siteA.com 의 작성자가 작성한 JavaScript는 브라우저가 siteB.com 에 대한 인증 쿠키를 사용하여 siteB.com 에 요청하도록 할 수 있습니다.이러한 방식으로 siteA.com 은 사용자가 siteB.com 과 공유하는 비밀 정보를 도용할 수 있습니다.

가 들어오는. CORS는.com 에 대한 합니다. CORS는 siteB.com 에서 동일한 정책을 합니다. CORS siteB.com 에서 동일한 정책을 사용합니다.Access-Control-Allow-Origin.com.siteB.com할 수 JavaScript를 하는 데 할 수 있는 siteA.com 을입니다.

어떤 도메인이 CORS 헤더를 제공해야 하는지 이해하려면 다음 사항을 고려하십시오.mybank.com 을 방문하면 malicious.com 에 도메인 간 요청을 시도하는 일부 JavaScript가 포함되어 있습니다.malicious.com 의 JavaScript가 상호 작용할 수 있도록 동일한 정책을 완화하는 CORS 헤더를 설정할지 여부는 malicious.com 이 아니라 mybank.com 에 달려 있어야 합니다.malicous.com 에서 자체적으로 CORS 헤더를 설정하여 mybank.com 에 대한 자체 JavaScript 액세스를 허용할 수 있다면 동일한 프로토콜 정책이 완전히 무효화됩니다.

제가 사이트를 개발할 때 느끼는 관점이 제 직감이 나쁜 이유라고 생각합니다.자바스크립트가 있는 제 사이트입니다.따라서 악의적인 작업을 수행하는 것이 아니며, 내 자바스크립트가 어떤 다른 사이트와 상호 작용할 수 있는지 지정하는 것은 나에게 달려 있습니다.사실 제가 생각해야 할 때:내 사이트와 상호 작용하려는 다른 사이트의 JavaScript는 어떤 것입니까? 그리고 이를 허용하기 위해 CORS를 사용해야 합니까?

제 경험으로 볼 때, 왜 CORS가 걱정이 되는지에 대한 간단한 설명은 찾기 어렵습니다.

그것이 왜 거기에 있는지 이해하면, 머리글과 토론이 훨씬 더 명확해집니다.몇 줄로 나누어 보겠습니다.

쿠키에 대한 모든 것입니다.쿠키는 도메인별로 클라이언트에 저장됩니다.

들어 다음과 같습니다.컴퓨터에 다음을 위한 쿠키가 있습니다.yourbank.com아마 당신의 세션이 거기에 있을 겁니다.

요점:클라이언트가 서버에 요청을 하면 해당 요청에 대해 도메인 아래에 저장된 쿠키를 보냅니다.

은 당신의 yourbank.com은 당신의 모든 계정을 하고, 의 계정을 보기 위해 보내집니다.yourbank.com.yourbank.com쿠키 더미를 수신하고 응답(사용자 계정)을 다시 보냅니다.

다른 클라이언트가 서버에 대해 원점 교차 요청을 할 경우, 이전과 마찬가지로 쿠키가 함께 발송됩니다.루로.

사용자가 검색하는 항목malicious.com악성 프로그램은 다음을 포함하여 다양한 은행에 많은 요청을 합니다.yourbank.com.

쿠키가 예상대로 유효성 검사되므로 서버가 응답을 승인합니다.

함께 - 이제, 그쿠들은모보내다니집서아져키다▁those,니▁get보▁along내집▁now. 그리고 지금,malicious.com는 에서응있다니의 .yourbank.

좋아요.

이제 몇 가지 질문과 답변이 명확해집니다.

  • "브라우저가 그렇게 하는 것을 차단하면 어떨까요?"네, 그건 코르스예요

  • "어떻게 하면 피할 수 있을까요?"서버에게 요청 사항에 대해 CORS가 괜찮다고 전달하도록 합니다.

클라이언트가 http://siteA - origin에서 Javascript 코드 MyCode.js를 다운로드합니다.

다운로드를 수행하는 코드 - html 스크립트 태그 또는 Javascript에서 xhr 또는 기타 코드 - 예를 들어 http://siteZ에서 왔습니다.그리고 브라우저가 MyCode.js를 요청하면 사이트 A와 사이트 Z!= 사이트 A에 요청하는 것을 확인할 수 있기 때문에 "Origin: http://siteZ"라는 오리진: 헤더를 보냅니다.(이 작업을 중지하거나 방해할 수 없습니다.)

MyCode.js의 응답 헤더에는 Access-Control-Allow-Origin: http://siteB가 포함되어 있으며, 이는 MyCode.js가 사이트 B에 대한 교차 오리진 참조를 허용한다는 것을 의미한다고 생각했습니다.

아니요. 즉, 사이트 B만 이 요청을 수행할 수 있습니다.따라서 사이트 Z의 MyCode.js에 대한 요청은 대신 오류를 수신하지만 브라우저는 일반적으로 아무 것도 제공하지 않습니다.그러나 서버가 대신 A-C-A-O: 사이트 Z를 반환하도록 하면 MyCode.js가 표시됩니다. 또는 '*'를 전송하면 모두가 들어갈 수 있습니다.또는 서버가 항상 오리진: 헤더에서 문자열을 보내는 경우... 하지만...보안을 위해 해커를 무서워하는 경우 서버는 요청할 수 있는 최종 목록의 오리진만 허용해야 합니다.

그러면, MyCode.js는 A 사이트에서 옵니다.사이트 B에 요청을 하면 모두 교차 오리진이며 브라우저는 오리진: 사이트 A를 보내고 사이트 B는 사이트 A를 가져와 허용된 요청자의 최종 목록에 있음을 인식하고 A-C-A-O: 사이트 A를 다시 보내야 합니다.그래야 브라우저가 스크립트가 해당 요청의 결과를 가져올 수 있습니다.

React 및 Axios를 사용하여 프록시 링크를 URL에 가입시키고 아래와 같이 헤더를 추가합니다.

https://cors-anywhere.herokuapp.com/+Your API URL

프록시 링크를 추가하는 것만으로도 작동하지만, 다시 No Access(액세스 불가) 오류가 발생할 수도 있습니다.따라서 아래와 같이 헤더를 추가하는 것이 좋습니다.

axios.get(`https://cors-anywhere.herokuapp.com/[YOUR_API_URL]`,{headers: {'Access-Control-Allow-Origin': '*'}})
      .then(response => console.log(response:data);
  }

경고:생산에 사용되지 않음

이것은 빠른 해결책일 뿐입니다.응답을 받을 수 없는 이유로 어려움을 겪고 있다면 이것을 사용할 수 있습니다.하지만 다시 말하지만, 이것은 생산을 위한 최선의 해결책은 아닙니다.

Express.js 4, Node.js 7.4 및 Angular에서 작업했는데 동일한 문제가 있었습니다.이것은 저에게 도움이 되었습니다.

서버 측: app.js 파일에서 다음과 같은 모든 응답에 헤더를 추가합니다.

app.use(function(req, res, next) {
    res.header('Access-Control-Allow-Origin', req.headers.origin);
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

모든 경로 앞에 있어야 합니다.

이 헤더가 많이 추가된 것을 많이 보았습니다.

res.header("Access-Control-Allow-Headers","*");
res.header('Access-Control-Allow-Credentials', true);
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');

하지만 난 그게 필요하지 않아요

클라이언트 측: Ajax에서 보낼 때 다음과 같은 "withCredentials: true"를 추가해야 합니다.

$http({
     method: 'POST',
     url: 'url',
     withCredentials: true,
     data : {}
   }).then(function(response){
       // Code
   }, function (response) {
       // Code
});

만약 당신이 PHP를 사용한다면, PHP 파일의 시작 부분에 다음 코드를 추가해 보세요.

localhost를 사용하는 경우 다음을 시도합니다.

header("Access-Control-Allow-Origin: *");

서버와 같은 외부 도메인을 사용하는 경우 다음을 시도하십시오.

header("Access-Control-Allow-Origin: http://www.website.com");

브라우저가 요청을 차단하는 교차 도메인 응용 프로그램을 테스트하려면 안전하지 않은 모드에서 브라우저를 열고 코드를 변경하거나 안전하지 않은 코드로 만들지 않고 응용 프로그램을 테스트하면 됩니다.

macOS에서 터미널 라인에서 다음 작업을 수행할 수 있습니다.

open -a Google\ Chrome --args --disable-web-security --user-data-dir

파이썬에서 플라스크-CORS 라이브러리를 성공적으로 사용하고 있습니다.그것은 CORS를 매우 쉽고 고통 없이 다룰 수 있게 해줍니다.저는 아래 도서관 문서에 있는 코드를 추가했습니다.

설치:

pip install -U flask-cors

모든 경로의 모든 도메인에 대해 CORS를 허용하는 간단한 예:

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route("/")
def helloWorld():
  return "Hello, cross-origin-world!"

자세한 예는 설명서를 참조하십시오.위의 간단한 예를 사용하여 별도의 플라스크 서버에 액세스해야 하는 Ionic 애플리케이션에서 CORS 문제를 해결했습니다.

다음 코드를 web.config 파일에 붙여넣기만 하면 됩니다.

은 다음 코드를 코붙합야니다어여 아래에 .<system.webServer>꼬리표를 달다

<httpProtocol>
  <customHeaders>
   <add name="Access-Control-Allow-Origin" value="*" />
   <add name="Access-Control-Allow-Headers" value="Content-Type" />
   <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
  </customHeaders>
</httpProtocol>

백엔드 서버에서 구성할 수는 없지만 브라우저에서 이러한 확장 기능을 사용하면 다음과 같이 작동합니다.

Firefox의 경우:

CORS Everywhere

Google Chrome의 경우:

CORS 허용:액세스-제어-원산지 허용

참고: CORS는 다음과 같은 구성으로 작동합니다.

CORS 옵션 허용

CORS Everywhere 옵션

공유의 헤더를 합니다.'Access-Control-Allow-Origin':'*';

Pphp:header('Access-Control-Allow-Origin':'*');

노드:app.use('Access-Control-Allow-Origin':'*');

이렇게 하면 다른 도메인에 대한 콘텐츠를 공유할 수 있습니다.

Nginx 및 Apache

셀러의 답변 외에 요청이 간단한지 여부(및 OPTIONS 사전 비행 요청이 발송되었는지 여부)를 보여주는 위키 그래프를 추가하고 싶습니다.

여기에 이미지 설명 입력

간단한 요청(예: 핫링크 이미지)의 경우 서버 구성 파일을 변경할 필요는 없지만 응용프로그램(예: 서버에서 호스트됨)에 헤더를 추가할 수 있습니다.Melvin Guerrero가 답변에서 언급한 것과 같이, 그러나 기억하십시오. 서버(구성)에 전체 CORS 헤더를 추가하는 동시에 애플리케이션(예: PHP)에서 단순한 CORS를 허용하면, 이것은 전혀 작동하지 않습니다.

다음은 널리 사용되는 두 서버의 구성입니다.

  • Nginx에서 CORS 켜기(nginx.conf 파일)

    location ~ ^/index\.php(/|$) {
   ...
    add_header 'Access-Control-Allow-Origin' "$http_origin" always; # if you change "$http_origin" to "*" you shoud get same result - allow all domain to CORS (but better change it to your particular domain)
    add_header 'Access-Control-Allow-Credentials' 'true' always;
    if ($request_method = OPTIONS) {
        add_header 'Access-Control-Allow-Origin' "$http_origin"; # DO NOT remove THIS LINES (doubled with outside 'if' above)
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Max-Age' 1728000; # cache preflight value for 20 days
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';  # arbitrary methods
        add_header 'Access-Control-Allow-Headers' 'My-First-Header,My-Second-Header,Authorization,Content-Type,Accept,Origin'; # arbitrary headers
        add_header 'Content-Length' 0;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        return 204;
    }
}

  • Apache(.htaccess 파일)에서 CORS 설정

    # ------------------------------------------------------------------------------
# | Cross-domain Ajax requests                                                 |
# ------------------------------------------------------------------------------

# Enable cross-origin Ajax requests.
# http://code.google.com/p/html5security/wiki/CrossOriginRequestSecurity
# http://enable-cors.org/

# change * (allow any domain) below to your domain
Header set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Allow-Headers "My-First-Header,My-Second-Header,Authorization, content-type, csrf-token"
Header always set Access-Control-Allow-Credentials "true"

Access-Control-Allow-Origin 응답 헤더는 응답을 지정된 오리진의 요청 코드와 공유할 수 있는지 여부를 나타냅니다.

Header type                 Response header
-------------------------------------------
Forbidden header name       no

오리진의 코드가 리소스에 액세스할 수 있도록 브라우저에 허용하는 응답에는 다음이 포함됩니다.

Access-Control-Allow-Origin: *

자세한 내용은 액세스-제어-원산지 허용...을(를) 참조하십시오.

각도가 있는 .NET Core 3.1 API의 경우

Startup.cs : CORS 추가

    //SERVICES
    public void ConfigureServices(IServiceCollection services){

        //CORS (Cross Origin Resource Sharing)
        //=====================================
        services.AddCors();
    }

    //MIDDLEWARES
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        app.UseRouting();

        //ORDER: CORS -> Authentication -> Authorization)
        //CORS (Cross Origin Resource Sharing)
        //=====================================  
        app.UseCors(x=>x.AllowAnyHeader().AllowAnyMethod().WithOrigins("http://localhost:4200"));

        app.UseHttpsRedirection();
    }
}

컨트롤러: 승인된 컨트롤러에 대해 CORS 활성화

 //Authorize all methods inside this controller
 [Authorize]
 [EnableCors()]
 public class UsersController : ControllerBase
 {
    //ActionMethods
 }

참고: 테스트를 위한 임시 솔루션입니다.

다음을 위해 백엔드를 제어할 수 없는 사용자를 위해Options 405 Method Not Allowed여기 Chrome 브라우저에 대한 해결 방법이 있습니다.

명령줄에서 실행:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="path_to_profile"

예:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:\Users\vital\AppData\Local\Google\Chrome\User Data\Profile 2"

대부분의 CORS 문제는 프론트엔드 기본 립인 반응형 각진 jquery 앱에서 클라이언트 측 Ajax를 통해 요청하려고 하기 때문입니다.

백엔드 응용 프로그램에서 요청해야 합니다.

프런트엔드 API에서 요청하려고 하지만 사용하려는 API가 백엔드 응용 프로그램에서 이 요청을 만들 것으로 예상하고 있으며 클라이언트 측 요청을 절대 수락하지 않습니다.

언급URL : https://stackoverflow.com/questions/10636611/how-does-the-access-control-allow-origin-header-work

'programing' 카테고리의 다른 글

NodeJs용 MariaDB 커넥터 | 존재하지 않는 경우 값을 삽입하는 방법  (0) 2023.06.06
루비의 "for" vs "each"  (0) 2023.06.06
모두 안드로이드입니다.지원 라이브러리는 정확히 동일한 버전 사양을 사용해야 합니다.  (0) 2023.06.06
PyInstaller로 데이터 파일 번들(--파일 하나)  (0) 2023.06.06
ispmanager mysql 설정이 비어 있습니다.편집 버튼이 비활성화되었습니다(().  (0) 2023.06.06

'programing'의 다른글

  • 현재글'액세스-컨트롤-오리진 허용' 헤더의 작동 방식은 무엇입니까?

관련글

댓글

티스토리툴바