XHR 크롬 / 파이어 폭스 등을 편집하고 재생합니까?


144

브라우저에서 XHR 요청을 변경하고 다시 재생하는 방법을 찾고있었습니다. 브라우저에서 POST 요청이 완료되었다고 가정하고 변경하려는 유일한 것은 작은 값이고 다시 재생한다고 가정하십시오. 이것은 브라우저에서 직접 수행하는 것이 훨씬 쉽고 빠릅니다.

나는 구글을 조금 둘러 본 적이 있지만 크롬이나 파이어 폭스에서 이것을 할 수있는 방법을 찾지 못했습니다. 해당 브라우저 중 하나 또는 다른 브라우저에서 수행 할 수있는 방법이 있습니까?


Chrome에서 'Replay XHR'이 작동하지 않는다는 것을 알게 된 후 프리 플라이트 ( OPTIONS) 요청 이있는 경우 실제 최종 요청이 아닌 프리 플라이트 요청 에서 '재생'을 클릭해야합니다 .
Janaka Bandara

답변:


181

크롬 :

  • devtools의 네트워크 패널에서 마우스 오른쪽 버튼을 클릭하고 cURL로 복사를 선택하십시오.
  • 요청을 붙여 넣거나 편집 한 다음 curl명령 이 있다고 가정하면 터미널에서 요청을 보냅니다.

캡처 참조 :

여기에 이미지 설명을 입력하십시오

또는 웹 페이지 컨텍스트에서 요청을 보내야하는 경우 "페치로 복사"를 선택 하고 Javascript 콘솔 패널에서 컨텐츠를 편집하여 보냅니다.


Firefox :

Firefox는 네트워크 패널에서 바로 XHR을 편집하고 다시 보낼 수 있습니다. 아래 캡처는 Firefox 36에서 가져온 것입니다.

여기에 이미지 설명을 입력하십시오


이것은 실제로 내가 찾고있는 것일 수 있습니다. 나는 cURL 호출을 복사 할 수 있다는 것을 알고 있었지만 인증을 받았기 때문에 터미널에서 직접 실행할 수 없었습니다. 그러나 터미널을 Chorme에 직접 빌드하면 브라우저가 "내부"에서 호출되었다고 가정합니다. 그렇다면 거래가 성사되어야합니다.
madsobel

14
답변에 Firefox에 대한 정보를 추가했습니다
Michael P. Bazos

작은 트릭 : 브라우저에서 cURL 출력을 보려면 CLI와 같이 CLI에서 실행 curl ... > preview.html한 다음 브라우저에서 파일을여십시오.
afilina

@afilina이 프로세스를 더욱 자동화하기 위해 && open preview.htmlmacOS에 추가 할 수 있으며 요청 후 파일이 바로 열립니다
CodeBrauer

2
이 경우 Firefox는 훨씬 더 나은 일을하고 있습니다!
jpenna

41

Chrome은 이제 버전 67에서 가져 오기복사를 갖습니다 .

가져 오기로 복사

네트워크 요청을 마우스 오른쪽 단추로 클릭 한 후 복사> 가져 오기 로 복사 를 선택 fetch()하여 해당 요청 과 동등한 코드를 클립 보드에 복사하십시오.

https://developers.google.com/web/updates/2018/04/devtools#fetch

샘플 출력 :

fetch("https://stackoverflow.com/posts/validate-body", {
  credentials: "include",
  headers: {},
  referrer: "https://stackoverflow.com/",
  referrerPolicy: "origin",
  body:
    "body=Chrome+now+has+_Copy+as+fetch_+in+version+67%3A%0A%0A%3E+Copy+as+fetch%0ARight-click+a+network+request+then+select+**Copy+%3E+Copy+As+Fetch**+to+copy+the+%60fetch()%60-equivalent+code+for+that+request+to+your+clipboard.%0A%0A&oldBody=&isQuestion=false",
  method: "POST",
  mode: "cors"
});

차이점은 cURL으로 복사 에는 모든 요청 헤더 (예 : 쿠키 및 수락)도 포함되며 Chrome 외부에서 요청을 재생하는 데 적합합니다. 이 fetch()코드는 동일한 브라우저 내에서 재생하는 데 적합합니다.


6
감사합니다. 다른 궁금한 점이 있으면 fetchChrome 콘솔에 명령을 직접 붙여넣고 요청을 재생하면됩니다.
Eric Kigathi

7
페치 후에 다음을 사용하여 페치에 의해 리턴 된 약속을 해결하고 응답 본문을 볼 수 있습니다 (JSON 인 경우).then(r => r.json()).then(json => console.log(json))
POSIX 호환

1
@ 조쉬 리, POSIX 호환 팁이 좋았 으며이 답변에 추가 할 수 있다고 생각합니다.
Nabi KAZ

@POSIX 호환 좋은 팁, 내 마음에 유지할 수있는 더 작은 명령이 있습니까?!
Nabi KAZ

페치 코드를 어디에 붙여
넣을지

20

내 두 가지 제안 :

  1. 크롬의 우편 배달부 플러그인 +를 우체부 인터셉터 플러그인 . 추가 정보 : 우편 배달부 캡처 요청 문서

  2. Windows를 사용하는 경우 Telerik 's Fiddler가 옵션입니다. http 요청을 재생하는 작곡가 옵션이 있으며 무료입니다.


8
Postman + Interceptor 크롬 확장 프로그램을 사용하기 시작한 이래로 Fiddler가 필요하지 않았습니다.
threadster

3
Chrome 용 FYI Postman 앱은 더 이상 사용되지 않으며 독립형 버전으로 설정하는 것이 좀 더 어렵습니다
yefrem

고마워 내가 찾고있는 것만 많이!
모하마드


4

Firefox의 경우 문제가 자체적으로 해결되었습니다. "편집 및 재전송"기능이 구현되어 있습니다.

Chrome Tamper 확장의 경우 트릭을 수행하는 것 같습니다.


더 이상 업데이트되지 않고 리뷰가 다소 나쁩니다. 가장 좋은 대안은 이런 종류의 작업에 Firefox를 사용하는 것입니다.
T3rm1

네. 재전송 상황은 매우 빠르게 변하는 것 같습니다. 이제 Chrome에 XHR 요청 재전송이 있지만 편집은 허용되지 않습니다.
Jari Turkia

편집 및 재전송시 쿠키의 CSRF 토큰에 문제가있는 것으로 보이는 Firefox ver.76에주의하십시오. 버전 37로 시도했지만 잘 작동했지만 버전 76에는 CSRF 토큰 유효성 검사 문제가 있습니다.
puppyceceyoyo

1

5 년이 지났으며 Chrome 개발자는이 필수 요구 사항을 무시하지 않았습니다.
Firefox와 같이 데이터를 편집 할 수있는 방법은 없지만 전체 XHR 재생을 제공합니다.
이를 통해 Ajax 호출을 디버그 할 수 있습니다. "Replay XHR"은 전체 전송을 반복합니다.
여기에 이미지 설명을 입력하십시오


0

위에서 언급했듯이 몇 가지 방법이 있지만 XHR 요청을 조작하고 다시 보내는 가장 좋은 방법은 크롬 개발 도구를 사용하여 요청을 cURL 요청으로 복사하는 것입니다 (네트워크 탭에서 요청을 마우스 오른쪽 버튼으로 클릭) ) 및 Postman 앱으로 가져 오기만하면됩니다 (왼쪽 상단의 거대한 가져 오기 버튼).


0

타사 확장을 설치할 필요가 없습니다!

이 존재하는 자바 스크립트 코드 조각 추가 할 수있는, 브라우저 북마크로 다음 요청을 추적 및 수정하는 모든 사이트의 활성화를. 다음과 같습니다.

여기에 이미지 설명을 입력하십시오

자세한 지침은 github 페이지를 검토하십시오.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.