การบล็อกการอ่านข้ามแหล่งกำเนิด (CORB)

ฉันเรียก API ของบุคคลที่สามโดยใช้ Jquery AJAX ฉันได้รับข้อผิดพลาดต่อไปนี้ในคอนโซล:

Cross-Origin Read Blocking (CORB) บล็อกการตอบสนองข้ามต้นทางURL ของฉันด้วยแอปพลิเคชันประเภท MIME / json ดูhttps://www.chromestatus.com/feature/5629709824032768สำหรับรายละเอียดเพิ่มเติม

ฉันใช้รหัสต่อไปนี้สำหรับการโทร Ajax:

$.ajax({
  type: 'GET',
  url: My Url,
  contentType: 'application/json',
  dataType:'jsonp',
  responseType:'application/json',
  xhrFields: {
    withCredentials: false
  },
  headers: {
    'Access-Control-Allow-Credentials' : true,
    'Access-Control-Allow-Origin':'*',
    'Access-Control-Allow-Methods':'GET',
    'Access-Control-Allow-Headers':'application/json',
  },
  success: function(data) {
    console.log(data);
  },
  error: function(error) {
    console.log("FAIL....=================");
  }
});

เมื่อฉันตรวจสอบใน Fiddler ฉันได้รับข้อมูลที่ตอบสนอง แต่ไม่ได้อยู่ในวิธีความสำเร็จของ Ajax

กรุณาช่วยฉันออกไป.

 dataType:'jsonp',

คุณกำลังส่งคำขอ JSONP แต่เซิร์ฟเวอร์ตอบสนองด้วย JSON

เบราว์เซอร์ปฏิเสธที่จะพยายามรักษา JSON เป็น JSONP เนื่องจากอาจมีความเสี่ยงด้านความปลอดภัย (หากเบราว์เซอร์ไม่พยายามที่จะรักษา JSON เป็น JSONP แล้วมันจะที่ดีที่สุด, ล้มเหลว)

ดูคำถามนี้เพื่อดูรายละเอียดเพิ่มเติมว่า JSONP คืออะไร โปรดทราบว่าเป็นการแฮ็กที่น่ารังเกียจในการหลีกเลี่ยงนโยบายแหล่งกำเนิดเดียวกันที่ใช้ก่อน CORS CORS เป็นวิธีการแก้ปัญหาที่สะอาดปลอดภัยและมีประสิทธิภาพมากขึ้น

ดูเหมือนว่าคุณกำลังพยายามส่งคำขอข้ามแหล่งกำเนิดและโยนทุกสิ่งที่คุณคิดได้ลงในกองคำสั่งที่ขัดแย้งกันจำนวนมาก

คุณต้องเข้าใจว่านโยบายแหล่งกำเนิดเดียวกันทำงานอย่างไร

ดูคำถามนี้สำหรับคำแนะนำเชิงลึก

ตอนนี้หมายเหตุเกี่ยวกับรหัสของคุณ:

contentType: 'application/json',

• สิ่งนี้จะถูกละเว้นเมื่อคุณใช้ JSONP
• คุณกำลังส่งคำขอ GET ไม่มีเนื้อหาขอเพื่ออธิบายประเภทของ.
• สิ่งนี้จะทำให้คำขอข้ามแหล่งกำเนิดไม่ใช่เรื่องง่ายซึ่งหมายความว่าเช่นเดียวกับสิทธิ์ CORS ขั้นพื้นฐานคุณต้องจัดการกับการบินล่วงหน้าด้วย

ลบสิ่งนั้นออก

 dataType:'jsonp',

• เซิร์ฟเวอร์ไม่ตอบสนองด้วย JSONP

ลบสิ่งนี้ออก (คุณสามารถทำให้เซิร์ฟเวอร์ตอบสนองด้วย JSONP แทน แต่ CORS ดีกว่า)

responseType:'application/json',

นี่ไม่ใช่ตัวเลือกที่สนับสนุนโดย jQuery.ajax ลบสิ่งนี้ออก

xhrFields: {withCredentials: false},

นี่คือค่าเริ่มต้น เว้นแต่คุณจะตั้งค่าเป็น true ด้วย ajaxSetup ให้ลบสิ่งนี้ออก

  headers: {
    'Access-Control-Allow-Credentials' : true,
    'Access-Control-Allow-Origin':'*',
    'Access-Control-Allow-Methods':'GET',
    'Access-Control-Allow-Headers':'application/json',
  },

• นี่คือส่วนหัวการตอบกลับ พวกเขาอยู่ในการตอบสนองไม่ใช่คำขอ
• สิ่งนี้จะทำให้คำขอข้ามแหล่งกำเนิดไม่ใช่เรื่องง่ายซึ่งหมายความว่าเช่นเดียวกับสิทธิ์ CORS ขั้นพื้นฐานคุณต้องจัดการกับการบินล่วงหน้าด้วย

ในกรณีส่วนใหญ่การตอบกลับที่ถูกบล็อกไม่ควรส่งผลกระทบต่อพฤติกรรมของหน้าเว็บและข้อความแสดงข้อผิดพลาด CORB สามารถละเว้นได้อย่างปลอดภัย ตัวอย่างเช่นคำเตือนอาจเกิดขึ้นในกรณีที่เนื้อหาของการตอบกลับที่ถูกบล็อกว่างเปล่าอยู่แล้วหรือเมื่อการตอบกลับถูกส่งไปยังบริบทที่ไม่สามารถจัดการได้ (เช่นเอกสาร HTML เช่นหน้าข้อผิดพลาด 404 ถูกส่งไปยังแท็ก)

https://www.chromium.org/Home/chromium-security/corb-for-developers

ฉันต้องล้างแคชของเบราว์เซอร์ฉันอ่านในลิงค์นี้ว่าหากคำขอได้รับการตอบสนองที่ว่างเปล่าเราจะได้รับข้อผิดพลาดคำเตือนนี้ ฉันได้รับ CORS ตามคำขอของฉันดังนั้นการตอบสนองของคำขอนี้จึงว่างเปล่าสิ่งที่ฉันต้องทำก็คือล้างแคชของเบราว์เซอร์และ CORS ก็หายไป ฉันได้รับ CORS เนื่องจากโครเมี่ยมได้บันทึกหมายเลข PORT ไว้ในแคชเซิร์ฟเวอร์ก็จะยอมรับlocalhost:3010และฉันกำลังทำอยู่localhost:3002เนื่องจากแคช

ส่งคืนการตอบกลับด้วยส่วนหัว 'Access-Control-Allow-Origin: *' ตรวจสอบโค้ดด้านล่างสำหรับการตอบสนองของเซิร์ฟเวอร์ Php

<?php header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');
echo json_encode($phparray); 

คุณต้องเพิ่ม CORS ที่ฝั่งเซิร์ฟเวอร์:

หากคุณใช้nodeJSแล้ว:

ก่อนอื่นคุณต้องติดตั้ง corsโดยใช้คำสั่งด้านล่าง:

npm install cors --save

ตอนนี้เพิ่มรหัสต่อไปนี้ในไฟล์เริ่มต้นแอปของคุณเช่น ( app.js or server.js)

var express = require('express');
var app = express();

var cors = require('cors');
var bodyParser = require('body-parser');

//enables cors
app.use(cors({
  'allowedHeaders': ['sessionId', 'Content-Type'],
  'exposedHeaders': ['sessionId'],
  'origin': '*',
  'methods': 'GET,HEAD,PUT,PATCH,POST,DELETE',
  'preflightContinue': false
}));

require('./router/index')(app);

ยังไม่ชัดเจนจากคำถาม แต่สมมติว่านี่เป็นสิ่งที่เกิดขึ้นกับไคลเอนต์การพัฒนาหรือการทดสอบและเนื่องจากคุณใช้ Fiddler อยู่แล้วคุณสามารถให้ Fiddler ตอบกลับด้วยคำตอบที่อนุญาต:

• เลือกคำขอปัญหาใน Fiddler
• เปิดAutoResponderแท็บ
• คลิกAdd Ruleและแก้ไขกฎเพื่อ:
  • วิธีการ: OPTIONS server url ที่นี่เช่นMethod:OPTIONS http://localhost
  • *CORSPreflightAllow
• ตรวจสอบ Unmatched requests passthrough
• ตรวจสอบ Enable Rules

หมายเหตุสองสาม:

1. เห็นได้ชัดว่านี่เป็นเพียงโซลูชันสำหรับการพัฒนา / การทดสอบที่ไม่สามารถแก้ไขบริการ API ได้ / ใช้งานได้จริง
2. ตรวจสอบว่าข้อตกลงใด ๆ ที่คุณมีกับผู้ให้บริการ API บุคคลที่สามอนุญาตให้คุณทำสิ่งนี้ได้
3. ดังที่คนอื่น ๆ ได้กล่าวไว้นี่เป็นส่วนหนึ่งของวิธีการทำงานของ CORS และในที่สุดส่วนหัวจะต้องถูกตั้งค่าบนเซิร์ฟเวอร์ API หากคุณควบคุมเซิร์ฟเวอร์นั้นคุณสามารถตั้งค่าส่วนหัวได้ด้วยตัวเอง ในกรณีนี้เนื่องจากเป็นบริการของบุคคลที่สามฉันสามารถสันนิษฐานได้ว่าพวกเขามีกลไกบางอย่างเท่านั้นที่คุณสามารถให้ URL ของไซต์ต้นทางแก่พวกเขาได้และพวกเขาจะอัปเดตบริการของตนตามเพื่อตอบสนองด้วยส่วนหัวที่ถูกต้อง

หากคุณกำลังทำงานกับ localhost ลองนี่เป็นส่วนขยายและวิธีการเดียวที่ใช้ได้กับฉัน (Angular, javascript เท่านั้นไม่มี php)

https://chrome.google.com/webstore/detail/moesif-orign-cors-changer/digfbfaphojjndkpccljibejjbppifbc/related?hl=en

คุณได้ลองเปลี่ยนdataTypeคำขอ ajax จากjsonpเป็นjsonหรือไม่ ที่แก้ไขในกรณีของฉัน

ในส่วนขยาย Chrome คุณสามารถใช้

chrome.webRequest.onHeadersReceived.addListener

เพื่อเขียนส่วนหัวการตอบกลับของเซิร์ฟเวอร์ใหม่ คุณสามารถแทนที่ส่วนหัวที่มีอยู่หรือเพิ่มส่วนหัวเพิ่มเติมได้ นี่คือส่วนหัวที่คุณต้องการ:

Access-Control-Allow-Origin: *

https://developers.chrome.com/extensions/webRequest#event-onHeadersReceived

ฉันติดปัญหา CORB และสิ่งนี้ได้รับการแก้ไขให้ฉัน

โดยทั่วไปส่วนหัวของการตอบกลับจะถูกตั้งค่าบนเซิร์ฟเวอร์ ตั้งค่า'Access-Control-Allow-Headers'เป็น'Content-Type'ฝั่งเซิร์ฟเวอร์

Cross-Origin Read Blocking (CORB) อัลกอริทึมที่เว็บเบราว์เซอร์อาจระบุและบล็อกทรัพยากรข้ามแหล่งที่มาที่น่าสงสัยก่อนที่จะไปถึงหน้าเว็บ .. ออกแบบมาเพื่อป้องกันไม่ให้เบราว์เซอร์ส่งการตอบสนองเครือข่ายข้ามแหล่งที่มาบางอย่าง ไปยังหน้าเว็บ

ขั้นแรกตรวจสอบให้แน่ใจว่าทรัพยากรเหล่านี้ให้บริการด้วย "" ที่ถูกต้องContent-Typeเช่นสำหรับประเภท JSON MIME - " text/json", " application/json", ประเภท HTML MIME - " text/html"

ประการที่สอง: ตั้งค่าโหมดเป็น cors เช่น mode:cors

การดึงข้อมูลจะมีลักษณะดังนี้

 fetch("https://example.com/api/request", {
            method: 'POST',
            body: JSON.stringify(data),
            mode: 'cors',
            headers: {
                'Content-Type': 'application/json',
                "Accept": 'application/json',
            }
        })
    .then((data) => data.json())
    .then((resp) => console.log(resp))
    .catch((err) => console.log(err))

ข้อมูลอ้างอิง: https://chromium.googlesource.com/chromium/src/+/master/services/network/cross_origin_read_blocking_explainer.md

https://www.chromium.org/Home/chromium-security/corb-for-developers

มีมูลค่าการกล่าวขวัญกรณีขอบในบริบทนี้คือ: Chrome (บางรุ่นอย่างน้อย) preflights ตรวจสอบล ธ โดยใช้ขั้นตอนวิธีการตั้งค่าสำหรับ Corb IMO นี่ค่อนข้างโง่เพราะพรีไลต์ดูเหมือนจะไม่ส่งผลกระทบต่อรูปแบบภัยคุกคามของ CORB และ CORB ดูเหมือนว่าได้รับการออกแบบให้ตั้งฉากกับ CORS นอกจากนี้ร่างกายของ CORS preflight ไม่สามารถเข้าถึงได้ดังนั้นจึงไม่มีผลเสียเพียงแค่คำเตือนที่น่ารำคาญ

อย่างไรก็ตามตรวจสอบว่าคุณ ธ preflight การตอบสนอง (OPTIONS ตอบสนองวิธีการ) ไม่ได้มีร่างกาย (204) 200 ว่างที่มีแอปพลิเคชันประเภทเนื้อหา / ออคเต็ตสตรีมและศูนย์ความยาวก็ใช้ได้ดีเช่นกัน

คุณสามารถยืนยันได้ว่าเป็นกรณีที่คุณกดปุ่มหรือไม่โดยการนับคำเตือน CORB เทียบกับคำตอบ OPTIONS พร้อมเนื้อหาข้อความ

ดูเหมือนว่าคำเตือนนี้เกิดขึ้นเมื่อส่งการตอบกลับที่ว่างเปล่าด้วย 200

การกำหนดค่านี้ในการ.htaccessแสดงคำเตือนของฉันบน Chrome:

Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST,GET,HEAD,OPTIONS,PUT,DELETE"
Header always set Access-Control-Allow-Headers "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, Authorization"

RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule .* / [R=200,L]

แต่เปลี่ยนบรรทัดสุดท้ายเป็น

RewriteRule .* / [R=204,L]

แก้ไขปัญหา!

ฉันมีปัญหาเดียวกันกับส่วนขยาย Chrome ของฉัน เมื่อฉันพยายามเพิ่มตัวเลือก "content_scripts" ในรายการส่วนนี้:

//{
    //  "matches": [ "<all_urls>" ],
    //  "css": [ "myStyles.css" ],
    //  "js": [ "test.js" ]
    //}

และฉันลบส่วนอื่น ๆ ออกจาก "อนุญาต" รายการของฉัน:

"https://*/"

เฉพาะเมื่อฉันลบ CORB ในหนึ่งในคำขอ XHR ของฉันหายไป

ที่แย่ที่สุดก็คือมีการร้องขอ XHR เพียงไม่กี่รายการในรหัสของฉันและมีเพียงหนึ่งในนั้นเท่านั้นที่เริ่มได้รับข้อผิดพลาด CORB (ทำไม CORB ไม่ปรากฏใน XHR อื่นฉันไม่รู้ทำไมการเปลี่ยนแปลงรายการจึงทำให้เกิดข้อผิดพลาดนี้ฉันไม่ทราบ) นั่นเป็นเหตุผลที่ฉันตรวจสอบโค้ดทั้งหมดซ้ำแล้วซ้ำอีกในเวลาไม่กี่ชั่วโมงและเสียเวลาไปมาก

ฉันพบปัญหานี้เนื่องจากรูปแบบของการตอบสนอง jsonp จากเซิร์ฟเวอร์ไม่ถูกต้อง การตอบสนองที่ไม่ถูกต้องมีดังนี้

callback(["apple", "peach"])

ปัญหาคือวัตถุที่อยู่ภายในcallbackควรเป็นวัตถุ json ที่ถูกต้องแทนที่จะเป็นอาร์เรย์ json ดังนั้นฉันจึงแก้ไขโค้ดเซิร์ฟเวอร์บางส่วนและเปลี่ยนรูปแบบ:

callback({"fruit": ["apple", "peach"]})

เบราว์เซอร์ยอมรับการตอบสนองอย่างมีความสุขหลังการแก้ไข

ลองติดตั้งส่วนขยาย "Moesif CORS" หากคุณประสบปัญหาใน Google Chrome เนื่องจากเป็นการร้องขอข้ามแหล่งที่มาดังนั้น chrome จึงไม่ยอมรับการตอบกลับแม้ว่ารหัสสถานะการตอบกลับจะเป็น 200 ก็ตาม