bestsource

Angular $http가 PUT/POST 대신 OPTIONS를 보내고 있습니다.

bestsource 2023. 3. 10. 22:37
반응형

Angular $http가 PUT/POST 대신 OPTIONS를 보내고 있습니다.

PHP 백엔드를 통해 MySQL 데이터베이스에 데이터를 업데이트/삽입하려고 합니다.앵귤러로 프런트 엔드를 만들고 있습니다.JS 및 사용$httpREST API와 통신하기 위한 서비스입니다.

설정은 다음과 같습니다.

$httpProvider를 통해 헤더를 설정합니다.

 $httpProvider.defaults.withCredentials = true;
 $httpProvider.defaults.headers = {'Content-Type': 'application/json;charset=utf-8'};

POST-Call은 다음과 같습니다.

   return $http({
      url: url,
      method: "POST",
      data: campaign
    });

Chrome의 Dev Console에는 다음과 같은 내용이 표시됩니다.

여기에 이미지 설명 입력

POST에서 PUT로 변경하면 PUT 대신 OPTIONS 콜을 보냅니다.콘텐츠 타입의 전환은content-type.

요청 페이로드가 개체로 전송됩니다.

여기에 이미지 설명 입력

헤더를 올바르게 설정하려면 어떻게 해야 합니까?


편집:

PHP 백엔드는 다음과 같은 헤더를 설정합니다.

   $e->getResponse()
              ->getHeaders()
              ->addHeaderLine('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');

   $e->getResponse()
              ->getHeaders()
              ->addHeaderLine('Access-Control-Allow-Origin', '*');

뭐 빠진 거 있어요?

좋아, 내가 풀었어.

뭐가 문제였나요?
DELETE, PUT 및 POST의 CORS 워크플로우는 다음과 같습니다.

여기에 이미지 설명 입력

기능은 다음과 같습니다.

  1. 어떤 요청이 이루어질지 확인하는 중
  2. POST, PUT, DELETE의 경우
  3. 우선 OPTION 요구를 송신하고, 요구가 송신된 도메인이 서버 도메인과 같은지 여부를 확인합니다.
  4. 그렇지 않은 경우 액세스 헤더가 이 요청을 전송할 수 있도록 허용해야 합니다.

여기서 중요: OPTIONS 요청은 자격 증명을 보내지 않습니다.

그래서 백엔드 서버가 PUT 요청을 허용하지 않았습니다.

솔루션:
이걸 안에 넣기.htaccess파일

RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ blank.php [QSA,L]
Header set Access-Control-Allow-Origin "http://sub.domain:3000"
Header always set Access-Control-Allow-Credentials "true"
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "X-Requested-With, Content-Type, Origin, Authorization, Accept, Client-Security-Token, Accept-Encoding"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"

그런 다음 빈 .php 파일 blank를 만듭니다.php는 공용 폴더 내에 있습니다.

편집: 한 코멘트가 지적했듯이 빈 PHP 파일을 작성하는 대신 이 재작성 규칙을 .htaccess 파일에 추가할 수 있습니다.

RewriteRule ^(.*)$ $1 [R=200,L,E=HTTP_ORIGIN:%{HTTP:ORIGIN}]]

명확히 하기 위해:

  1. 액세스 제어 헤더를 이미 보냈습니다.
  2. 그게 해결한 건 첫 두 줄이었고
  3. 포트를 가진 특정 서브도메인으로부터의 접근컨트롤-Allow-Origin

CORS에 대해 자세히 알아볼 수 있는 최고의 웹사이트입니다.

이 명령어를 지정할 필요가 없습니다.$http헤더는 수동으로 모두 백그라운드에서 수행되며 자동으로 설정됩니다.application/json위해서POST그리고.PUTtype requests.그러니까 네가 해야 할 일은

$http.post(url, data);
$http.put(url, data);

언급URL : https://stackoverflow.com/questions/30254277/angular-http-is-sending-options-instead-of-put-post

반응형