CORS 오류: 요청 헤더 필드 허가가 비행 전 응답의 Access-Control-Allow-Headers에 의해 허용되지 않습니다.

CORS 오류: 요청 헤더 필드 허가가 비행 전 응답의 Access-Control-Allow-Headers에 의해 허용되지 않습니다.

로컬 호스트 포트에서 다른 포트로 요청을 전송하려고 합니다.프런트엔드에서 angularjs를 사용하고 백엔드에서 노드를 사용하고 있습니다.

CORS 요청이기 때문에 node.js에서 사용하고 있습니다.

res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH');
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization');

angular.js 서비스 파일에는

return {
    getValues: $resource(endpoint + '/admin/getvalues', null, {
        'get': {
             method: 'GET',
             headers:{'Authorization':'Bearer'+' '+ $localStorage.token}
             }
     }),
}

다음과 같은 오류가 발생하였습니다.

요청 헤더 필드 허가는 비행 전 응답의 Access-Control-Allow-Headers에 의해 허용되지 않습니다.

도와주세요!

이것은 API의 문제이며, Postman/Fielder를 사용하여 HTTP 요청을 API로 전송하면 이 오류가 발생하지 않습니다.브라우저의 경우 보안을 위해 OPTIONS 요청/프리플릿을 항상 API로 전송한 후 실제 요청을 전송합니다(GET/POST/PUT/DELETE).따라서 요청 방식이 OPTION인 경우 "Access-Control-Allow-Headers"에 "Access-Control-Allow-Headers"에 "OPTIONS"를 추가해야 합니다.이렇게 수정했습니다.

if (context.Request.Method == "OPTIONS")
        {
            context.Response.Headers.Add("Access-Control-Allow-Origin", new[] { (string)context.Request.Headers["Origin"] });
            context.Response.Headers.Add("Access-Control-Allow-Headers", new[] { "Origin, X-Requested-With, Content-Type, Accept, Authorization" });
            context.Response.Headers.Add("Access-Control-Allow-Methods", new[] { "GET, POST, PUT, DELETE, OPTIONS" });
            context.Response.Headers.Add("Access-Control-Allow-Credentials", new[] { "true" });

        }

허용된 헤더에도 옵션을 추가해야 합니다. 브라우저는 원래 요청을 보내기 전에 사전 전송 요청을 보냅니다.이하를 참조해 주세요.

 res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,PATCH,OPTIONS');

소스 https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/OPTIONS 에서

CORS에서는 OPTIONS 메서드를 사용하여 프리플라이트 요구가 송신되므로 서버는 이들 파라미터를 사용하여 요구를 송신해도 되는지 여부를 응답할 수 있습니다.Access-Control-Request-Methodheader는 실제 요청이 전송되면 POST 요청 메서드로 전송됨을 사전 비행 요청의 일부로 서버에 알립니다.Access-Control-Request-Headers는 실제 합니다.X-PINGOTHER ★★★★★★★★★★★★★★★★★」Content-Type 서버는할 수 있습니다.이제 서버는 이러한 상황에서 요청을 수락할지 여부를 결정할 수 있습니다.

편집필

npmjs.com/package/cors npm 패키지를 사용하면 이 수동 설정을 피할 수 있습니다.나도 이 방법을 써봤는데, 명확하고 쉬워.

res.header('Access-Control-Allow-Origin', '*');자동화 헤더에서는 동작하지 않습니다.cors 라이브러리를 사용하여 비행 전 요청을 활성화하기만 하면 됩니다.

var express = require('express')
var cors = require('cors')
var app = express()
app.use(cors())
app.options('*', cors())

cors 라이브러리를 설치하지 않고 원래 코드를 수정하는 경우에는 Access-Control-Allow-Origin:*가 잘못되어 있습니다.인증 토큰(예: JWT)을 전달할 때 서버를 호출하는 모든 URL을 명시적으로 지정해야 합니다.인증 토큰을 사용할 때 "*"를 사용할 수 없습니다.

먼저 설치해야 합니다. cors다음 명령을 사용합니다.

npm install cors --save

이제 앱 시작 파일에 다음과 같은 코드를 추가하십시오( ).app.js or server.js)

var express = require('express');
var app = express();

var cors = require('cors');
var bodyParser = require('body-parser');

//enables cors
app.use(cors({
  'allowedHeaders': ['sessionId', 'Content-Type'],
  'exposedHeaders': ['sessionId'],
  'origin': '*',
  'methods': 'GET,HEAD,PUT,PATCH,POST,DELETE',
  'preflightContinue': false
}));

require('./router/index')(app);

ServiceStack 백엔드를 사용하여 이 정보를 얻으려면 Cors 플러그인의 허용된 헤더에 "Authorization"을 추가하십시오.

Plugins.Add(new CorsFeature(allowedHeaders: "Content-Type,Authorization"));

1. 이 크롬 확장 기능을 추가하고 "액세스 제어 활성화-[허용/노출]-헤더"를 활성화하십시오.

2. 또, 같은 메뉴로 「Test cors in the same menu」를 열어, 사용 가능한 모든 옵션을 테스트합니다.각 옵션을 클릭하고 각 옵션에 대한 성공 메시지(녹색)가 표시되는지 확인합니다.

3. 응용 프로그램을 새로고침합니다.이제 코르스 오류는 사라졌습니다.

언급URL : https://stackoverflow.com/questions/42061727/cors-error-request-header-field-authorization-is-not-allowed-by-access-control