CORS - httprequest를 '사전 비행'하려면 어떻게 해야 합니까?
WCF 서비스(내가 소유하고 있는)에 교차 도메인 HTTP 요청을 하려고 합니다.저는 도메인 간 스크립팅 제한을 다루기 위한 몇 가지 기술을 읽었습니다.서비스가 GET 요청과 POST 요청을 모두 수용해야 하기 때문에 src가 GET 요청의 URL인 동적 스크립트 태그를 구현할 수 없습니다.저는 서버에서 자유롭게 변경할 수 있기 때문에 "Access-Control-Allow-Origin" 헤더 및 OPTONS 요청을 포함한 '프리플라이트' 요청을 포함하도록 서버 응답을 구성하는 해결책을 구현하기 시작했습니다.나는 이 게시물에서 아이디어를 얻었습니다: CORS 작동하기
서버 쪽에서 제 웹 방식은 HTTP 응답에 'Access-Control-Allow-Origin: *'을 추가하는 것입니다.응답에 이 헤더가 포함되어 있음을 알 수 있습니다.제 질문은 다음과 같습니다.요청(OPTIONS)을 '프리플라이트'하려면 어떻게 해야 합니까?저는 jQuery.getJ를 사용하고 있습니다.SON은 GET 요청을 수행하지만 브라우저는 악명 높은 요청을 즉시 취소합니다.
오리진 http://localhost는 Access-Control-Allow-Origin에서 허용되지 않습니다.
이 CORS 기술을 잘 아는 사람이 있습니까?제 요청을 사전에 전달하기 위해 고객이 어떤 변경을 해야 합니까?
감사합니다!
비행 전 요청 시 다음 두 개의 헤더가 표시됩니다.액세스-제어-요청-방법 및 액세스-제어-요청-헤더.이러한 요청 헤더는 서버에 실제 요청을 할 수 있는 권한을 요청하는 것입니다.실제 요청이 작동하려면 사전 비행 응답에서 이러한 헤더를 승인해야 합니다.
예를 들어 브라우저가 다음 헤더를 사용하여 요청을 한다고 가정합니다.
Origin: http://yourdomain.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-Custom-Header
그러면 서버는 다음 헤더로 응답해야 합니다.
Access-Control-Allow-Origin: http://yourdomain.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Allow-Headers 응답 헤더에 특히 주의를 기울여야 합니다.이 헤더의 값은 Access-Control-Request-Headers 요청 헤더에서 동일한 헤더여야 하며 '*'이 될 수 없습니다.
이 응답을 비행 전 요청에 전송하면 브라우저가 실제 요청을 수행합니다.CORS에 대한 자세한 내용은 여기 http://www.html5rocks.com/en/tutorials/cors/ 에서 확인할 수 있습니다.
이 스레드는 2014년까지 거슬러 올라가지만, 이 문제는 여전히 우리 중 많은 사람들에게 발생할 수 있습니다.jQuery 1.12 /PHP 5.6 컨텍스트에서 이 문제를 처리한 방법은 다음과 같습니다.
- jQuery는 제한된 헤더만을 사용하여 XHR 요청을 전송했으며 'Origin'만 전송했습니다.
- 비행 전 요청은 필요 없었습니다.
- 서버는 이러한 요청을 탐지하고 "Access-Control-Allow-Origin: " . $_SERVER['를 추가하기만 하면 됩니다.HTTP_ORIGIN'] 헤더, 교차 오리진 XHR임을 감지한 후.
PHP 코드 샘플:
if (!empty($_SERVER['HTTP_ORIGIN'])) {
// Uh oh, this XHR comes from outer space...
// Use this opportunity to filter out referers that shouldn't be allowed to see this request
if (!preg_match('@\.partner\.domain\.net$@'))
die("End of the road if you're not my business partner.");
// otherwise oblige
header("Access-Control-Allow-Origin: " . $_SERVER['HTTP_ORIGIN']);
}
else {
// local request, no need to send a specific header for CORS
}
특히, 추가하지 마십시오.exit;
사전 비행이 필요치 않기 때문에
다음과 같은 간단한 단계로 Node.js에 사용자 지정 미들웨어를 작성하여 CORS 문제를 해결합니다.
don't need to set anything from the client, just a little change on the Node.js server will fix the problem.
미들웨어를 만듭니다.
// in middleware/corsResolver.js
function corsResolver(req, res, next) {
// Website you wish to allow to connect
// running front-end application on port 3000
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
// Request methods you wish to allow
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
// Request headers you wish to allow
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type,Authorization');
// Set to true if you need the website to include cookies in the requests sent
// to the API (e.g. in case you use sessions)
res.setHeader('Access-Control-Allow-Credentials', true);
// Pass to next layer of middleware
next();
}
module.exports = corsResolver;
이제 server.js(index.js 또는 노드 서버를 시작하는 모든 메인 파일)를 편집하고 다음 미들웨어를 추가합니다.
// server.js or indes.js
const corsResolver = require('path/to/resolver-middleware')
app.use(corsResolver) // -----------> applied middleware here
// other stuff
언급URL : https://stackoverflow.com/questions/8685678/cors-how-do-preflight-an-httprequest
'bestsource' 카테고리의 다른 글
SQL 서버 저장 프로시저에서 삭제된 행 수 계산 (0) | 2023.10.26 |
---|---|
이미지 또는 스팬 태그를 사용하지 않고 CSS를 통해 UL/LI HTML 목록에서 Bullet 색상을 설정하는 방법 (0) | 2023.10.26 |
Android TextView : "setText로 표시된 텍스트 연결 안 함" (0) | 2023.10.26 |
파이썬에서 데이터베이스 연결 풀링을 위한 가장 좋은 솔루션은 무엇입니까? (0) | 2023.10.26 |
ng-required vs required 사용 (0) | 2023.10.26 |