POST 대신 OPTIONS로 전송된 Angular로부터의 HTTP 요청

POST 대신 OPTIONS로 전송된 Angular로부터의 HTTP 요청

angular.js 어플리케이션에서 서버로 HTTP 요청을 보내려고 하는데 몇 가지 CORS 오류를 해결해야 합니다.

HTTP 요청은 다음 코드를 사용하여 이루어집니다.

functions.test = function(foo, bar) {
    return $http({
        method: 'POST',
        url: api_endpoint + 'test',
        headers: {
            'foo': 'value',
            'content-type': 'application/json'
        },
        data: {
            bar:'value'
        }
    });
};

첫 번째 시도에서는 몇 가지 CORS 오류가 발생했습니다.그래서 저는 제 PHP 스크립트에 다음 행을 추가했습니다.

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE, PUT');
header('Access-Control-Allow-Headers: X-Requested-With, Content-Type, Origin, Authorization, Accept, Client-Security-Token, Accept-Encoding, X-Auth-Token, content-type');

이것으로 첫 번째 에러는 해소되었습니다.

이제 Chrome의 개발자 콘솔에 다음과 같은 오류가 표시됩니다.

angular.js:12011 OPTIONS http://localhost:8000/test(익명함수)

423ef03a:1 XMLHttpRequest가 http://localhost:8000/test를 로드할 수 없습니다.사전 비행 응답에 잘못된 HTTP 상태 코드 400이 있습니다.

상태 「HTTP 상태」(HTTP)).400( ( ) : (이행)'):

가 왜 는이 안 됩니다.OPTIONS에는, 리모트서버에 , 「」라고 표시됩니다.POST이이 문제 제제 제결 결? ???

TL;DR 응답

설명.

OPTIONS요청은 Cross-Origin Resource Sharing(CORS; 크로스 오리진 리소스 공유)의 일부인 프리플라이트 요청이라고 불립니다.브라우저는 이 요청을 사용하여 다음과 같이 특정 도메인에서 요청이 허용되는지 여부를 확인합니다.

1. URL로 를 들어, 「URL」이라고 .POSTapplication/json type(콘텐츠 유형)
2. 첫째, 그것은 비행 전을 전송한다. OPTIONS
3. 다음은 프리플라이트 요청의 응답 HTTP 상태 코드에 따라 달라집니다.
   • 가 비(非)로2XX상태 응답, 브라우저는 실제 요청을 전송하지 않습니다(어차피 거부될 것을 알고 있기 때문입니다).
   • 가 「」로 .HTTP 200 OK)2XX에 의해 요구인 )를 POST의 경우

솔루션

따라서 올바른 헤더가 있는 경우, 비행 전 요청의 응답 HTTP 상태 코드 또는 기타 성공적 코드()2XX를 확인하기만 하면 됩니다.

---

상세설명

단순한 요구

브라우저는 전송 전 요구를 송신하지 않는 경우가 있습니다.이러한 요구는 이른바 단순한 요구로, 다음과 같은 경우에 사용됩니다.

• 되는 방법 중 - 허용음음음음음음음음음음음음음음 one one one one one one one one one one one one one one one.GET-HEAD-POST

• 사용자 에이전트에 의해 자동으로 설정된 헤더(Connection, User-Agent 등) 외에 수동으로 설정할 수 있는 헤더는 다음과 같습니다.
  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type에 나타내는 에 주의해 주십시오).
  • DPR
  • Downlink
  • Save-Data
  • Viewport-Width
  • Width
• 콘텐츠 타입입니다.
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
• 는 어떤 이벤트청취자도 되어 있지 .XMLHttpRequestUpload 오브젝트에는, 「」를 .이러한 오브젝트에는XMLHttpRequest.upload★★★★★★★★★★★★★★★★★★.
• .ReadableStream가 requestobject에서 .

이러한 요구는 직접 전송되며 서버는 요청 또는 응답이 CORS 규칙과 일치하지 않는 경우 오류와 함께 정상적으로 처리됩니다. 헤더 「CORS」가 됩니다.Access-Control-Allow-*.

사전 전달된 요청

브라우저는 실제 요청이 단순한 요청 조건을 충족하지 않는 경우, 대개 다음과 같은 사전 요청 메시지를 보냅니다.

• 다음과 같은 사용자 정의 콘텐츠 유형application/xml ★★★★★★★★★★★★★★★★★」application/json
• 요청 방법은 다음과 같습니다.GET,HEAD ★★★★★★★★★★★★★★★★★」POST
• POST than른른른른른 method method method method method method method method른 than than than than와는 다른 내용 입니다.application/x-www-form-urlencoded,multipart/form-data ★★★★★★★★★★★★★★★★★」text/plain

전송 전 요청에 대한 응답에 다음 속성이 있는지 확인해야 합니다.

• 상태 코드,즉 "HTTP", "",200 OK
• '''Access-Control-Allow-Origin: *( 「」)*도메인으로부터의 을 사용하여 할 수 물론 여기서 특정 도메인을 사용하여 접근을 제한할 수 있습니다.)

반대편에서 서버는 다음 속성을 가진 프리플라이트 요구에 대한 응답을 보내는 것만으로 CORS 요구를 거부할 수 있습니다.

• 코드' )2XX)
• 코드 "HTTP")200 OK, CORS 헤더 CORS 헤더)는 Access-Control-Allow-*)

자세한 내용은 Mozilla Developer Network 설명서 또는 HTML5Rocks의 CORS 튜토리얼을 참조하십시오.

API를 위해 NODE 서버를 사용하는 Angular 2 앱을 작성하는 것과 매우 유사한 문제가 발생했습니다.

로컬 머신으로 개발 중이기 때문에 Angular 앱에서 API에 POST를 하려고 할 때 Cross Origin Header 문제가 계속 발생하였습니다.

(노드 서버 내의) 헤더를 다음과 같이 설정하면 GET 요구에서는 동작하지만 PUT 요구에서는 빈 객체가 데이터베이스에 계속 게시됩니다.

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE, PUT');
header('Access-Control-Allow-Headers: X-Requested-With, Content-Type, 
Origin, Authorization, Accept, Client-Security-Token, Accept-
Encoding, X-Auth-Token, content-type');

Dawid Ferency의 투고를 읽고 PREFLIT 요청이 공백 데이터를 서버로 전송하고 있다는 것을 깨달았습니다.그 때문에 DB 엔트리가 비어 있었기 때문에 NODE JS 서버에 다음 행을 추가했습니다.

  if (req.method == "OPTIONS")
    {
        res.writeHead(200, {"Content-Type": "application/json"});
        res.end();
    }

이제 서버는 PRE FLIGHT 요청을 무시하고 상태 200을 반환하여 브라우저에 모든 것이 그루비함을 알립니다.그러면 실제 요청이 통과하여 실제 데이터를 DB에 게시할 수 있습니다.

그냥 넣어주세요

if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
header("HTTP/1.1 200 ");
exit;}

서버 사이드 앱의 선두에 있으면 문제 없을 것입니다.

어플리케이션의요청을 하려면 cors를 합니다.@CrossOrigin(origins = "*", maxAge = 3600)를 선택합니다.

이 문서를 참조해 주세요.

가장 좋은 방법은 다음과 같습니다.

1. proxy.conf.json을 설정합니다.

   {
     "/api": {
       "target": "http://localhost:8080",
       "secure": false,
       "logLevel": "debug",
       "changeOrigin": true
     }
   } 
   

2. 그런 다음 요청을 보내기 위해 각도로 사용하는 URL이 상대적인지 확인합니다(/api/something(절대 아님)localhost:8080/api/something이 경우 프록시가 작동하지 않습니다.

Chrome v79+부터는 OPTIONS Check(사전 실행 요청)가 네트워크 탭에 더 이상 표시되지 않음 - Source

언급URL : https://stackoverflow.com/questions/40497399/http-request-from-angular-sent-as-options-instead-of-post