การทำคำขอ HTTP โดยใช้เครื่องมือนักพัฒนาซอฟต์แวร์ของ Chrome

มีวิธีในการสร้างคำขอ HTTP โดยใช้เครื่องมือ Chrome Developer โดยไม่ใช้ปลั๊กอินเช่น POSTER หรือไม่?

เนื่องจากFetch APIได้รับการสนับสนุนโดย Chrome (และเบราว์เซอร์อื่น ๆ ส่วนใหญ่) ตอนนี้จึงเป็นเรื่องง่ายที่จะทำการร้องขอ HTTP จากคอนโซล devtools

เพื่อรับไฟล์ JSON เช่น:

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(res => res.json())
  .then(console.log)

หรือเพื่อโพสต์ทรัพยากรใหม่:

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8'
  }
})
.then(res => res.json())
.then(console.log)

Chrome Devtools ยังรองรับไวยากรณ์ async / await ใหม่ (แม้ว่าการรอตามปกติสามารถใช้ได้ภายในฟังก์ชัน async):

const response = await fetch('https://jsonplaceholder.typicode.com/posts/1')
console.log(await response.json())

ขอให้สังเกตว่าคำขอของคุณจะอยู่ภายใต้นโยบายกำเนิดเดียวกันเช่นเดียวกับคำขอ HTTP อื่น ๆ ในเบราว์เซอร์ดังนั้นจึงควรหลีกเลี่ยงคำขอข้ามแหล่งกำเนิดหรือตรวจสอบให้แน่ใจว่าเซิร์ฟเวอร์ตั้งค่าส่วนหัว CORS ที่อนุญาตคำขอของคุณ

ใช้ปลั๊กอิน (คำตอบเก่า)

นอกเหนือจากคำแนะนำที่โพสต์ก่อนหน้านี้ฉันพบว่าปลั๊กอินPostmanสำหรับ Chrome ทำงานได้ดีมาก อนุญาตให้คุณตั้งค่าส่วนหัวและพารามิเตอร์ URL ใช้การตรวจสอบความถูกต้อง HTTP บันทึกคำขอที่คุณเรียกใช้บ่อยๆ

หากคุณต้องการแก้ไขและออกคำร้องขอที่คุณบันทึกไว้ในแท็บเครือข่ายของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome:

• คลิกขวาNameที่คำขอ
• เลือก Copy > Copy as cURL
• วางในบรรทัดคำสั่ง (คำสั่งรวมถึงคุกกี้และส่วนหัว)
• แก้ไขคำขอตามต้องการและเรียกใช้

ฉันรู้ว่าโพสต์เก่า ... แต่มันอาจจะมีประโยชน์ที่จะออกจากที่นี่

เบราว์เซอร์สมัยใหม่สนับสนุนFetch APIแล้ว

คุณสามารถใช้สิ่งนี้:

fetch("<url>")
    .then(data => data.json()) // could be .text() or .blob() depending on the data you are expecting
    .then(console.log); // print your data

ps: มันจะทำการตรวจสอบ CORS ทั้งหมดเนื่องจากเป็นการปรับปรุง XmlHttpRequestการตรวจสอบเพราะมันเป็นที่ดีขึ้น

หากหน้าเว็บของคุณมี jquery ในหน้าของคุณคุณสามารถเขียนลงในคอนโซลนักพัฒนาของ Chrome ได้:

$.get(
    "somepage.php",
    {paramOne : 1, paramX : 'abc'},
    function(data) {
       alert('page content: ' + data);
    }
);

มันเป็นวิธี jquery ของการทำมัน!

ขยายบน @dhfsk คำตอบ

นี่คือขั้นตอนการทำงานของฉัน

1. จาก Chrome DevTools ให้คลิกขวาที่คำขอที่คุณต้องการจัดการ> Copy as cURL

2. เปิดบุรุษไปรษณีย์

3. คลิกImportที่มุมบนซ้ายแล้วPaste Raw Text

หากคุณต้องการทำ POST จากโดเมนเดียวกันคุณสามารถแทรกฟอร์มลงใน DOM โดยใช้เครื่องมือนักพัฒนาซอฟต์แวร์และส่งที่:

ฉันโชคดีที่สุดที่รวมคำตอบสองข้อไว้ด้านบน นำทางไปยังไซต์ใน Chrome จากนั้นค้นหาคำขอบนแท็บเครือข่ายของ DevTools คลิกขวาที่คำขอและคัดลอก แต่คัดลอกเป็นการดึงข้อมูลแทน cURL คุณสามารถวางรหัสการเรียกโดยตรงในคอนโซล DevTools และแก้ไขแทนการใช้บรรทัดคำสั่ง

ในการรับคำขอด้วยส่วนหัวให้ใช้รูปแบบนี้

   fetch('http://example.com', {
      method: 'GET',
      headers: new Headers({
               'Content-Type': 'application/json',
               'someheader': 'headervalue'
               })
    })
    .then(res => res.json())
    .then(console.log)

หากคุณใช้ jquery บนเว็บไซต์ของคุณคุณสามารถใช้สิ่งนี้คอนโซลของคุณ

$.post(
    'dom/data-home.php',
    {
    type : "home", id : "0"
    },function(data){
        console.log(data)
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

ทำให้ง่ายขึ้นหากคุณต้องการให้คำขอใช้บริบทการสืบค้นเช่นเดียวกับหน้าเว็บที่คุณกำลังดูอยู่แล้วในคอนโซล Chrome ให้ทำดังนี้

window.location="https://www.example.com";