CORS 문제를 여러 번 발견했으며 일반적으로 해결할 수 있지만 MEAN 스택 패러다임 에서이 문제를 확인하여 실제로 이해하고 싶습니다.
Express 서버에 미들웨어를 추가하여 이러한 것들을 포착하기 전에 요청에 오류가 발생하는 일종의 사전 후크가있는 것 같습니다.
요청 헤더 필드 Access-Control-Allow-Headers는 프리 플라이트 응답의 Access-Control-Allow-Headers에서 허용되지 않습니다.
나는 이것을 할 수 있다고 가정했다.
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Headers","*")
})또는 동등한 것이지만 이것은 수정하지 않는 것 같습니다. 나는 또한 시도했다
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Headers","Access-Control-Allow-Headers")
})아직 운이 없다.
답변
사용자 정의 요청 헤더로 게임을 시작하면 CORS 프리 플라이트가 제공됩니다. 이것은 HTTP OPTIONS동사 를 사용하는 요청 이며 여러 헤더를 포함하며 그 중 하나 Access-Control-Request-Headers는 클라이언트가 요청에 포함하려는 헤더를 나열합니다.
이 작업을 수행하려면 적절한 CORS 헤더를 사용하여 해당 CORS 프리 플라이트에 응답해야합니다. 그 중 하나는 실제로 Access-Control-Allow-Headers입니다. 해당 헤더에는 헤더에 포함 된 값 Access-Control-Request-Headers(또는 그 이상)이 포함되어야합니다.
https://fetch.spec.whatwg.org/#http-cors-protocol 에서이 설정에 대해 자세히 설명합니다.
답변
이것이 작동하려면 추가해야합니다.
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
response.setHeader("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers");
브라우저는 서버에서 호스팅되는 서비스가 다른 도메인의 브라우저에서 액세스 될 수 있는지 확인하기 위해 프리 플라이트 요청 (메소드 유형 OPTIONS 포함)을 보냅니다. 프리 플라이트 요청에 응답하여 위의 헤더를 삽입하면 브라우저는 추가 전화를 걸면 괜찮다는 것을 이해하고 실제 GET / POST 전화에 유효한 응답을 얻습니다. * 대신에 Access-Control-Allow-Origin “,”localhost, xvz.com “을 사용하여 액세스 권한이 부여 된 도메인을 제한 할 수 있습니다. (*는 모든 도메인에 대한 액세스 권한을 부여합니다)
답변
이 문제는
"Origin, X-Requested-With, Content-Type, Accept, Authorization"
내 프로젝트의 특정 (express.js / nodejs)
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
next();
});
최신 정보:
매번 오류 : Access-Control-Allow-Headers is not allowed by itself in preflight response오류 당신은 크롬 개발자 도구에 어떤 문제가 있는지 볼 수 있습니다 :
위의 오류가 Content-Type없으므로 문자열 Content-Type을 추가하십시오.Access-Control-Allow-Headers
답변
받아 들여진 대답은 괜찮지 만 이해하기가 어려웠습니다. 다음은이를 명확히하는 간단한 예입니다.
내 아약스 요청에 표준 인증 헤더가있었습니다.
$$(document).on('ajaxStart', function(e){
var auth_token = localStorage.getItem(SB_TOKEN_MOBILE);
if( auth_token ) {
var xhr = e.detail.xhr;
xhr.setRequestHeader('**Authorization**', 'Bearer ' + auth_token);
}
이 코드는 문제의 오류를 생성합니다. nodejs 서버에서해야 할 일은 허용 된 헤더에 권한 부여를 추가하는 것이 었습니다.
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type,**Authorization**');
답변
다른 답변에 추가하십시오. 나는 같은 문제가 있었고 이것은 REST 호출을 허용하기 위해 Express 서버에서 사용한 코드입니다.
app.all('*', function(req, res, next) {
res.header('Access-Control-Allow-Origin', 'URLs to trust of allow');
res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type');
if ('OPTIONS' == req.method) {
res.sendStatus(200);
} else {
next();
}
});
이 코드는 기본적으로 모든 요청을 가로 채고 CORS 헤더를 추가 한 다음 정상적인 경로를 계속 사용합니다. OPTIONS 요청이 있으면 CORS 헤더로만 응답합니다.
편집 : 동일한 컴퓨터에서 두 개의 별도 nodejs Express 서버 에이 수정 프로그램을 사용하고있었습니다. 결국 간단한 프록시 서버로 문제를 해결했습니다.
답변
방금 ASP.NET 컨텍스트에서 Web.config가 다음과 같은지 확인하십시오.
<system.webServer>
<modules>
<remove name="FormsAuthentication" />
</modules>
<handlers>
<remove name="ExtensionlessUrlHandler-Integrated-4.0" />
<!--<remove name="OPTIONSVerbHandler"/>-->
<remove name="TRACEVerbHandler" />
<!--
<add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
-->
</handlers>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="Content-Type, Authorization" />
<add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
</customHeaders>
</httpProtocol>
Access-Control-Allow-Headers키 의 Authorization 값을 확인하십시오 . 권한 부여 값이 누락되었습니다.이 구성으로 문제가 해결됩니다.
답변
실 렉스 프로젝트에서 이것을 사용했습니다.
$app->after(function (Request $request, Response $response) {
$response->headers->set('Access-Control-Allow-Origin', '*');
$response->headers->set("Access-Control-Allow-Credentials", "true");
$response->headers->set("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
$response->headers->set("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
});
