Firefox 또는 Chrome 브라우저에서 HTTP POST 요청을 수동으로 보내는 방법

Firefox 또는 Chrome 브라우저에서 HTTP POST 요청을 수동으로 보내는 방법

현재 작업 중인 웹 응용 프로그램에서 몇 가지 URL을 테스트하고 있습니다.이를 위해 수동으로 HTTP POST 요청을 만들고 싶습니다(즉, 원하는 파라미터를 추가할 수 있습니다).

Chrome 및/또는 Firefox에 없는 기능이 있습니까?

저는 이런 것들을 위해 포스트맨이라는 크롬 앱을 만들고 있습니다.다른 모든 확장자들도 약간 구식인 것 같아서 내 것을 만들었다.또, 여기에서는 독자적인 API를 문서화하는 데 도움이 되는 많은 기능도 갖추고 있습니다.

---

Postman은 이제 Windows, Mac 및 Linux용 네이티브 애플리케이션(즉, 독립 실행형)도 보유하고 있습니다.지금은 네이티브 앱을 사용하는 것이 더 좋습니다. 자세한 내용은 여기를 참조하십시오.

---

CURL은 원하는 것을 할 수 있는 최고입니다!간단하지만 효과적인 명령줄 도구입니다.

REST 구현 테스트명령어:

curl -i -X GET http://rest-api.io/items
curl -i -X GET http://rest-api.io/items/5069b47aa892630aae059584
curl -i -X DELETE http://rest-api.io/items/5069b47aa892630aae059584
curl -i -X POST -H 'Content-Type: application/json' -d '{"name": "New item", "year": "2009"}' http://rest-api.io/items
curl -i -X PUT -H 'Content-Type: application/json' -d '{"name": "Updated item", "year": "2010"}' http://rest-api.io/items/5069b47aa892630aae059584

파이어폭스

를 누르거나 [Menubar]-> [ Tools ]-> [ Web Developer ]-> [ Network ](네트워크)를 클릭하여 Developer Tools(개발도구)의 [Network]패널을 엽니다.요청에 해당하는 행을 선택합니다.

새로운 버전

오른쪽 끝에 있는 재발송 버튼을 찾습니다.그러면 왼쪽에 새 편집 양식이 열립니다.편집해 주세요.

이전 버전

그런 다음 오른쪽 상단에 있는 작은 문 아이콘(스크린샷에서는 강조 표시된 머리글 바로 왼쪽에 있습니다), 두 번째 행(표시되지 않으면 페이지를 새로고침)을 클릭합니다.-> 원하는 요청을 편집하여 재발송합니다.

브라우저를 무시하고 CLI를 사용해 보십시오.HTTPie는 훌륭한 도구입니다!

CLI HTTP 클라이언트:

• HTTPie
• 컬리
• HTTP 프롬프트
• 컬
• 움츠러들다

브라우저 확장을 고집하는 경우:

크롬:

• 우체부 - REST 클라이언트(사용되지 않음, 데스크톱 프로그램 있음)
• 고급 REST 클라이언트
• Talend API 테스터 - 무료 에디션

파이어폭스:

• 클라이언트

Chrome용 Postman에서 큰 영감을 받아 Firefox용으로 비슷한 것을 쓰기로 했습니다.

REST Easy*는 파이어폭스의 재기동 없는 애드온으로, 요구에 대해 가능한 한 많은 제어를 제공하는 것을 목적으로 하고 있습니다.애드온은 아직 실험적인 상태(Mozilla에 의해 검토조차 되지 않음)이지만, 개발은 순조롭게 진행되고 있습니다.

이 프로젝트는 오픈 소스이기 때문에 개발을 도와야 한다고 느끼는 사람이 있다면 https://github.com/nathan-osman/Rest-Easy를 방문하면 좋을 것입니다.

_{* http://addons.mozilla.org에서 이용할 수 있는 애드온은 항상 GitHub에서 이용할 수 있는 코드보다 약간 늦습니다.}

이미 받은 답변이 제공하는 "Chrome 및/또는 Firefox의 확장 또는 기능"을 특별히 요청하셨는데, 간단한 파라미터에 대한 폐쇄형 질문 "How can I send a POST request with a web browser?"에 대한 oezi의 답변이 마음에 듭니다.oezi씨는 다음과 같이 말합니다.

「 」 「 」 「 」 「 」를 설정하기만 하면 .method로로 합니다."post"

<form action="blah.php" method="post">
  <input type="text" name="data" value="mydata" />
  <input type="submit" />
</form>

즉, POST 액션을 테스트하기 위한 매우 간단한 페이지를 작성합니다.

Fetch API에 대한 OP 질문에 대한 Benny Neugebauer의 코멘트는 여기에 답변으로 제시되어야 한다고 생각합니다.OP는 Chrome에서 HTTP POST 요청을 수동으로 작성하기 위한 기능을 찾고 있었고, 그것이 바로 fetch 명령어이기 때문입니다.

Fetch API의 간단한 예를 다음에 나타냅니다.

// Make sure you run it from the domain 'https://jsonplaceholder.typicode.com/'. (cross-origin-policy)
fetch('https://jsonplaceholder.typicode.com/posts',{method: 'POST', headers: {'test': 'TestPost'} })
  .then(response => response.json())
  .then(json => console.log(json))

fetch 명령어의 장점은 다음과 같습니다.간단하고, 짧고, 빠르고, 사용할 수 있으며, 크롬 콘솔에 저장된 콘솔 명령으로도 나중에 사용할 수 있습니다.

를 눌러 콘솔탭에서 명령어를 쓰고(또는 그 전에 사용했을 경우는 위 키를 눌러), 를 눌러 보류 중임을 확인하고 응답을 반환하는 것이 단순한 POST 요구 테스트에 매우 도움이 됩니다.

물론 여기서 가장 큰 단점은 Postman과 달리 크로스 오리진 정책을 통과시키지 못한다는 것입니다.그러나 로컬 환경이나 CORS를 수동으로 활성화할 수 있는 기타 환경에서 테스트하는 경우에는 매우 유용합니다.

다음은 Chrome용 Advanced REST Client 확장입니다.

이 기능은 매우 효과적입니다. 디버거를 함께 사용할 수 있습니다.네트워크 창은 특히 유용합니다. 렌더링된 JSON 개체와 오류 페이지를 제공합니다.

Firefox의 경우 REST Client라는 확장 기능도 있어 매우 좋습니다.

RESTClient, RESTful 웹 서비스용 디버거

브라우저와 직접 관련이 없을 수도 있지만 Fiddler도 좋은 소프트웨어입니다.

Watir 또는 WatiN을 사용하여 브라우저를 자동화할 수도 있습니다.Watir는 Ruby, Watin은 for입니다.NET 언어하지만 그게 당신이 찾고 있는 것인지는 잘 모르겠어요.

• http://watin.sourceforge.net/
• http://watir.com/

Postman의 등장이래, 여기서 언급할 가치가 있는 다른 고객도 몇 명 있습니다.

• 인섬니아: 데스크톱 애플리케이션과 Chrome 플러그인 모두 지원
• Hoppscotch: 이전에는 Postwoman으로 알려졌으며 Chrome 플러그인도 사용할 수 있습니다.재미있어지고 싶다면 도커와 로컬로 작업시킬 수도 있습니다.
• Paw: Mac을 사용하는 경우
• Advanced Rest Client: 이미 Chrome 플러그인으로 언급되어 있지만 데스크톱 애플리케이션도 탑재되어 있다는 점에 유의할 필요가 있습니다.
• soapUI: Java로 작성되어 많은 테스트 기능을 갖추고 있습니다.
• 부메랑: API를 테스트하는 또 다른 방법입니다.SOAP 통합이 포함되어 있으며 Chrome 플러그인도 사용할 수 있습니다.
• Thunder Client: VS Code를 텍스트 에디터로 사용하는 경우 이 멋진 확장자를 확인하십시오.

Runscope를 사용해 보세요.이 서비스를 샘플링하는 무료 툴은 https://www.hurl.it/에서 제공됩니다.

방식, 인증, 헤더, 파라미터 및 본문을 설정할 수 있습니다.응답에는 상태 코드, 헤더 및 본문이 표시됩니다.응답 본문은 접을 수 있는 계층 구조로 JSON에서 포맷할 수 있습니다.

유료 계정은 테스트 API 호출을 자동화하고 반환 데이터를 사용하여 새로운 테스트 호출을 작성할 수 있습니다.

COI 공개:난 룬스코프와 아무 관계도 없어

Firefox용 http-tool 확인...

HTTP 요청 및 응답을 디버깅해야 하는 웹 개발자를 대상으로 합니다.REST 기반 API를 개발할 때 매우 유용합니다.

특징:

• 얻다
• 머리
• 포스트.
• 놓다
• 삭제

요청할 헤더를 추가합니다.
요청할 본문 내용을 추가합니다.

응답 헤더 보기.
응답으로 본문 내용을 봅니다.
응답 상태 코드를 봅니다.
응답 상태 텍스트를 봅니다.

따라서 콘솔을 사용하여 함수를 만들고 콘솔에서 요청을 쉽게 전송할 수 있습니다. 그러면 올바른 쿠키 등이 생성됩니다.

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#supplying_request_options 에서 이것을 입수했습니다.

// Example POST method implementation:
async function postData(url = '', data = {}, options = {}) {
  // Default options are marked with *
let defaultOptions = {
    method: 'POST', // *GET, POST, PUT, DELETE, etc.
    mode: 'cors', // no-cors, *cors, same-origin
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin', // include, *same-origin, omit
    headers: {
      'Content-Type': 'application/json'
      // 'Content-Type': 'application/x-www-form-urlencoded',
    },
    redirect: 'follow', // manual, *follow, error
    referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
    body: JSON.stringify(data) // body data type must match "Content-Type" header
  }

// update the default options with specific options (e.g. { "method": "GET" } )
const requestParams = Object.assign(defaultOptions, options);

const response = await fetch(url, requestParams);
  return response.text(); // displays the simplest form of the output in the console. Maybe changed to response.json() if you wish
}

요청을 가져오려면 브라우저 주소 표시줄에 요청을 넣기만 하면 됩니다!

이것을 콘솔에 붙여넣으면 다음과 같이 함수를 반복 호출하여 POST 요청을 할 수 있습니다.

postData('https://example.com/answer', { answer: 42 })
  .then(data => {
    console.log(data); // you might want to use JSON.parse on this
  });

서버 출력은 콘솔에 인쇄됩니다(네트워크 탭에서 사용할 수 있는 모든 데이터도 마찬가지입니다.

이 함수는 JSON 데이터를 전송하고 있다고 가정합니다.그렇지 않은 경우 필요에 맞게 변경해야 합니다.

ReqBin을 사용하여 브라우저에서 직접 요청을 게시할 수 있습니다.플러그인 또는 데스크톱 애플리케이션이 필요하지 않습니다.

우체부 앱을 사용하려고 했는데 인증에 문제가 있었습니다.브라우저를 사용하여 단독으로 수행해야 하는 경우 네트워크 탭으로 이동하여 콜을 마우스 오른쪽 버튼으로 클릭합니다. 예를 들어 편집하여 응답을 보냅니다.여기 Firefox에 대한 비슷한 답변이 있습니다. 이 오른쪽 클릭은 가장자리에 있어서도 작동했고 크롬에서도 작동할 것이라고 확신합니다.

Windows CLI 솔루션

PowerShell에서는 Invoke-WebRequest를 사용할 수 있습니다.구문 예:

Invoke-WebRequest -Uri http://localhost:3000 -Method POST -Body @{ username='clever_name', password='hunter2' } -UseBasicParsing

Internet Explorer가 없는 시스템에서는-UseBasicParsing플래그를 설정합니다.

12년이 지난 지금, 저자가 왜 파이어폭스나 크롬에 대한 솔루션을 요구했는지 이해하기 쉽다.그러나 12년 후에는 다른 브라우저도 등장하며 추가 기능이나 추가 도구를 사용하지 않는 최고의 브라우저는 Microsoft Edge입니다.

devtools(F12)를 열고 Network Console 탭(Network 또는 Console 탭이 아님)을 엽니다.+ 기호를 클릭하여 표시되지 않으면 엽니다.)

공식 가이드는 다음과 같습니다. https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/network-console/network-console-tool

재미있게 보내!

언급URL : https://stackoverflow.com/questions/4797534/how-to-manually-send-http-post-requests-from-firefox-or-chrome-browser