programing

OPTIONS 프리플라이트 요청을 건너뛰는 방법

mbctv 2023. 3. 12. 11:09
반응형

OPTIONS 프리플라이트 요청을 건너뛰는 방법

PhoneGap 앱을 개발했는데, 현재 모바일 웹사이트로 전환 중입니다.작은 결함 하나 빼고는 모든 것이 원활하게 작동합니다.POST 요청으로 특정 서드파티 API를 사용하고 있는데 앱에서는 정상적으로 동작하지만 모바일 웹사이트 버전에서는 실패합니다.

자세히 보니, AngularJS(실제로 브라우저가 OPTIONS 요청을 처음 보낸 것 같습니다.오늘 CORS에 대해 많은 것을 배웠는데, 완전히 비활성화하는 방법을 찾을 수 없을 것 같습니다.저는 그 API에 액세스할 수 없습니다(따라서 변경은 불가능합니다). 그러나 현재 작업 중인 도메인을 Access-Control-Allow-Origin 헤더에 추가했습니다.

제가 말하는 코드는 다음과 같습니다.

        var request = {
                language: 'fr',
                barcodes: [
                    {
                        barcode: 'somebarcode',
                        description: 'Description goes here'
                    }
                ]
            };
        }
        var config = {
            headers: { 
                'Cache-Control': 'no-cache',
                'Content-Type': 'application/json'
            }
        };
        $http.post('http://somedomain.be/trackinginfo', request, config).success(function(data, status) {
            callback(undefined, data);
        }).error(function(data, status) {
            var err = new Error('Error message');
            err.status = status;
            callback(err);
        });

브라우저(또는 Angular)를 방지하려면 어떻게 해야 합니까?JS) OPTIONS 요청을 전송하고 실제 POST 요청으로 건너뜁니까?AngularJS 1.2.0을 사용하고 있습니다.

는, 타입 「컨텐츠 타입」에 의해서 되고 .application/json을 Content-Type으로 text/plain당신의 경우는요. application/x-www-form-urlencoded&multipart/form-dataContent-Type도 허용되지만 요청 페이로드 형식을 적절하게 지정해야 합니다.

이 변경을 한 후에도 여전히 프리플라이가 표시되는 경우 Angular는 요청에 X-header를 추가하고 있을 수도 있습니다.

또는 트리거되는 헤더(Authorization, Cache-Control...)가 있을 수 있습니다.다음 항목을 참조하십시오.

Ray가 말한 것처럼 콘텐츠 헤더를 다음과 같이 수정함으로써 이를 중지할 수 있습니다.

 $http.defaults.headers.post["Content-Type"] = "text/plain";

예:

angular.module('myApp').factory('User', ['$resource','$http',
    function($resource,$http){
        $http.defaults.headers.post["Content-Type"] = "text/plain";
        return $resource(API_ENGINE_URL+'user/:userId', {}, {
            query: {method:'GET', params:{userId:'users'}, isArray:true},
            getLoggedIn:{method:'GET'}
        });
    }]);

또는 직접 콜에 접속할 수도 있습니다.

var req = {
 method: 'POST',
 url: 'http://example.com',
 headers: {
   'Content-Type': 'text/plain'
 },
 data: { test: 'test' }
}

$http(req).then(function(){...}, function(){...});

이렇게 해도 비행 전 옵션 요청은 전송되지 않습니다.

메모: 요청에는 커스텀헤더 파라미터가 없어야 합니다.요청헤더에 커스텀헤더가 포함되어 있는 경우 브라우저가 프리플라이트 요구를 하기 때문에 회피할 수 없습니다.

특정 유형의 교차 도메인 AJAX 요청을 실행할 때 CORS를 지원하는 최신 브라우저는 추가 "사전 비행" 요청을 삽입하여 액션을 수행할 권한이 있는지 여부를 판단합니다.쿼리 예:

$http.get( ‘https://example.com/api/v1/users/’ +userId,
  {params:{
           apiKey:’34d1e55e4b02e56a67b0b66’
          }
  } 
);

이 fragment의 결과, 2 개의 요구(OPTIONS 와 GET)가 송신된 것을 알 수 있습니다.서버로부터의 응답에는 쿼리 GET의 허용 가능성을 확인하는 헤더가 포함됩니다.OPTIONS 요청을 올바르게 처리하도록 서버가 구성되지 않은 경우 클라이언트 요청은 실패합니다.예를 들어 다음과 같습니다.

Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: accept, origin, x-requested-with, content-type
Access-Control-Allow-Methods: DELETE
Access-Control-Allow-Methods: OPTIONS
Access-Control-Allow-Methods: PUT
Access-Control-Allow-Methods: GET
Access-Control-Allow-Methods: POST
Access-Control-Allow-Orgin: *
Access-Control-Max-Age: 172800
Allow: PUT
Allow: OPTIONS
Allow: POST
Allow: DELETE
Allow: GET

가장 좋은 방법은 "OPTIONS" 타입으로 미들웨어에서 200을 반환하는 것인지 확인하는 것이라고 생각합니다.그것은 나에게 효과가 있었다.

express.use('*',(req,res,next) =>{
      if (req.method == "OPTIONS") {
        res.status(200);
        res.send();
      }else{
        next();
      }
    });

Preflight는 브라우저에 의해 구현되는 웹 보안 기능입니다.Chrome의 경우 --disable-web-security 플래그를 추가하여 모든 웹 보안을 해제할 수 있습니다.

예: "C:\Program Files\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:\newChromeSettings"WithoutSecurity." 먼저 크롬 바로 가기를 새로 만들고 해당 속성으로 이동한 후 위와 같이 대상을 변경할 수 있습니다.이게 도움이 될 거야!

content-type을 defined로 설정하면 javascript는 헤더 데이터를 그대로 전달하고 기본 각도 $httpProvider 헤더 설정을 덮어씁니다.각 $http 문서

$http({url:url,method:"POST", headers:{'Content-Type':undefined}).then(success,failure);

언급URL : https://stackoverflow.com/questions/22968406/how-to-skip-the-options-preflight-request

반응형