Firefox 'คำขอข้ามแหล่งกำเนิดถูกบล็อก' แม้จะมีส่วนหัว

ฉันกำลังพยายามส่งคำขอข้ามแหล่งที่มาอย่างง่ายและ Firefox ก็บล็อกมันอย่างต่อเนื่องโดยมีข้อผิดพลาดนี้:

คำขอข้ามแหล่งที่มาถูกบล็อก: นโยบายต้นทางเดียวกันไม่อนุญาตให้อ่านทรัพยากรระยะไกลที่ [url] สามารถแก้ไขได้โดยการย้ายทรัพยากรไปยังโดเมนเดียวกันหรือเปิดใช้งาน CORS [url]

ทำงานได้ดีใน Chrome และ Safari

เท่าที่ฉันสามารถบอกได้ว่าฉันตั้งค่าส่วนหัวที่ถูกต้องทั้งหมดบน PHP ของฉันเพื่อให้สามารถใช้งานได้ นี่คือสิ่งที่เซิร์ฟเวอร์ของฉันตอบสนอง

HTTP/1.1 200 OK
Date: Mon, 23 Jun 2014 17:15:20 GMT
Server: Apache/2.2.22 (Debian)
X-Powered-By: PHP/5.4.4-14+deb7u8
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type
Access-Control-Request-Headers: X-Requested-With, accept, content-type
Vary: Accept-Encoding
Content-Length: 186
Content-Type: text/html

ฉันได้ลองใช้ Angular, jQuery และวัตถุ XMLHTTPRequest พื้นฐานแล้วดังนี้:

var data = "id=1234"
var request = new XMLHttpRequest({mozSystem: true})
request.onload = onSuccess;
request.open('GET', 'https://myurl.com' + '?' + data, true)
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
request.send()

... และทำงานได้ในทุกเบราว์เซอร์ยกเว้น Firefox ใครสามารถช่วยเรื่องนี้?

ปรากฎว่าสิ่งนี้ไม่มีส่วนเกี่ยวข้องกับ CORS แต่เป็นปัญหากับใบรับรองความปลอดภัย ข้อผิดพลาดที่ทำให้เข้าใจผิด = ปวดหัว 4 ชั่วโมง

ฉันเจอคำถามนี้เมื่อพบว่าคำขอใน Firefox ถูกบล็อกด้วยข้อความ:

เหตุผล: คำขอ CORS ไม่สำเร็จ

หลังจากดึงผมออกฉันพบว่าส่วนขยาย Firefox ที่ติดตั้งใหม่ Privacy Badger กำลังบล็อกคำขอ

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

ดูเหตุผล: คำขอ CORS ไม่ประสบความสำเร็จใน MDN สำหรับรายละเอียด

ฉันพบว่าปัญหาของฉันคือเซิร์ฟเวอร์ที่ฉันส่งคำขอข้ามไปมีใบรับรองที่ไม่น่าเชื่อถือ

หากคุณต้องการเชื่อมต่อกับข้ามโดเมนhttpsคุณต้องเพิ่มข้อยกเว้นสำหรับใบรับรองนี้ก่อน

คุณสามารถทำได้โดยไปที่ลิงค์ที่ถูกบล็อกหนึ่งครั้งและเพิ่มข้อยกเว้น

ฉันพบวิธีแก้ปัญหาหลังจาก 2 วัน :(

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

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Requests_with_credentials

หากคุณไม่มีใบรับรอง 'ของจริง' (ดังนั้นจึงต้องใช้ใบรับรองที่ลงชื่อด้วยตนเอง) ใน FireFox คุณสามารถไปที่:

Options > Privacy & Security > (scroll to the bottom) View Certificates > Add Exception.

ที่นั่นกรอกตำแหน่งเช่น https: //wwww.myserver: myport

เพียงแค่คำเตือน ในที่สุดฉันก็สามารถแก้ไขปัญหากับ Firefox และ CORS ได้

ทางออกสำหรับฉันคือโพสต์นี้

การตั้งค่า CORS (การแชร์ทรัพยากรข้ามแหล่งที่มา) บน Apache ด้วยส่วนหัวการตอบสนองที่ถูกต้องซึ่งอนุญาตให้ทุกอย่างผ่าน | เบนจามินฮอร์น

อย่างไรก็ตาม Firefox ทำงานได้แปลกจริงๆหลังจากตั้งค่าส่วนหัวเหล่านั้นบนเซิร์ฟเวอร์ Apache (ในโฟลเดอร์. htaccess)

ฉันเพิ่มconsole.log("Hi FF, you are here A")ฯลฯจำนวนมากเพื่อดูว่าเกิดอะไรขึ้น

xhr.send()ตอนแรกก็ดูเหมือนว่ามันแขวนคอ แต่แล้วฉันก็ค้นพบว่ามันไม่เข้าใจคำพูดนี้ ฉันวางอีกอันไว้console.logข้างหน้าและไม่ไปถึงที่นั่น - แม้ว่าจะไม่มีอะไรระหว่างอันสุดท้ายconsole.logกับอันใหม่ console.logมันก็หยุดระหว่างสอง

การเรียงลำดับบรรทัดใหม่การลบเพื่อดูว่ามีอักขระแปลก ๆ ในไฟล์หรือไม่ ฉันไม่พบอะไรเลย

การรีสตาร์ท Firefox ช่วยแก้ไขปัญหา

ใช่ฉันควรยื่นข้อบกพร่อง มันแปลกมากจนไม่รู้จะสืบพันธุ์ยังไง

ข้อสังเกต : และโอ้ฉันเพิ่งทำHeader always setบางส่วนไม่ใช่Rewrite*ส่วน!

เพียงแค่เพิ่ม

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>

ไปยัง.htaccessไฟล์ในรูทของเว็บไซต์ที่คุณพยายามเชื่อมต่อ

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

ฉันพบปัญหาที่คล้ายกันซึ่งส่วนหัวที่ถูกต้องทั้งหมดถูกส่งคืนในคำขอ ajax ก่อนการบิน แต่เบราว์เซอร์รายงานว่าคำขอจริงถูกบล็อกเนื่องจากส่วนหัว CORS ไม่ดี

ปรากฎว่าหน้าที่ถูกร้องขอกลับแสดงข้อผิดพลาด 500 เนื่องจากรหัสที่ไม่ถูกต้อง แต่เมื่อดึงข้อมูลผ่าน CORS เท่านั้น เบราว์เซอร์ (ทั้ง Chrome และ Firefox) รายงานผิดพลาดว่าส่วนหัว Access-Control-Allow-Origin หายไปแทนที่จะบอกว่าหน้าเว็บส่งคืน 500

ลองใช้วิธีนี้จะช่วยแก้ปัญหาของคุณได้

1. ใน config.php ของคุณให้เพิ่ม www pre ในโดเมนของคุณ.com ตัวอย่างเช่น:

   HTTP define('HTTP_SERVER', 'http://domain name with www/');
   HTTPS define('HTTPS_SERVER', 'http://domain name with www/');

2. เพิ่มสิ่งนี้ลงในไฟล์. htaccess ของคุณ

   RewriteCond %{REQUEST_METHOD} OPTIONS RewriteRule ^(.*)$ $1 [R=200,L]

สำหรับฉันปรากฎว่าฉันตั้งค่าAccess-Control-Allow-Originส่วนหัวการตอบสนองเป็นเฉพาะ (และถูกต้อง) host.comแต่ต้องส่งกลับเป็นhttp://host.comแทน Firefox ทำอะไร? มันกลืนคำขอ GET อย่างเงียบ ๆ และส่งคืนสถานะ 0 ไปยัง XHR โดยไม่มีการส่งคำเตือนไปยังคอนโซลจาวาสคริปต์ในขณะที่สำหรับความล้มเหลวอื่น ๆ ที่คล้ายกันอย่างน้อยก็จะพูดอะไรบางอย่าง ไอไอ.

หากต้องการแก้ไขข้อบกพร่องให้ตรวจสอบบันทึกของเซิร์ฟเวอร์หากเป็นไปได้ Firefox ส่งคืนข้อผิดพลาด CORS ในคอนโซลด้วยเหตุผลหลายประการ

หนึ่งในเหตุผลก็คือปลั๊กอิน uMatrix (และฉันเดาว่า NoScript และปลั๊กอินที่คล้ายกันด้วย)

ฉันประสบปัญหาที่คล้ายกันและฉันคิดว่าสามารถลงทะเบียนได้ว่าฉันแก้ไขอย่างไร:

ฉันมีระบบที่สร้างขึ้นโดยพื้นฐานบน Symfony 3 เพื่อจุดประสงค์ในการเรียนรู้และประสิทธิภาพด้วยตนเองฉันตัดสินใจที่จะเขียนสคริปต์บางส่วนโดยใช้ GoLang และ API ที่เข้าถึงได้โดยสาธารณะ

My Go API ต้องการพารามิเตอร์รูปแบบ Json และส่งคืนการตอบสนองรูปแบบ Json

หากต้องการเรียก GoApi เหล่านั้นที่ฉันใช้อยู่ส่วนใหญ่ $ .ajax (jQuery) การทดสอบครั้งแรกเป็นการหลอกลวง: ป๊อปอัป "คำขอข้ามแหล่งที่มา (ไม่) ที่มีชื่อเสียง จากนั้นฉันพยายามตั้งค่า "Access-Control-Allow-Origin: *" ใน apache conf, htaccess, php, javascript และทุกที่ที่หาได้จาก google!

แต่ถึงกระนั้นข้อผิดพลาดที่น่าผิดหวังเหมือนกัน !!!

วิธีแก้ปัญหานั้นง่ายมาก: ฉันต้องส่งคำขอ "POST" แทน "GET"

เพื่อให้บรรลุนั้นฉันต้องปรับทั้ง GoLang และ JavaScript เพื่อใช้ GET! เมื่อเสร็จแล้วไม่มีการขอข้ามแหล่งกำเนิดอีกต่อไปสำหรับฉัน !!!

หวังว่าจะช่วยได้

PS:

ฉันใช้ apache และ Vhost ใน Directory Block ที่ฉันมี

  Header always set Access-Control-Allow-Origin "*"
  Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"

ข้อควรจำ: "*" หมายความว่าคุณจะยอมรับคำขอจากใครก็ได้ !!! (ซึ่งอาจจะขาดความปลอดภัย) ในกรณีของฉันมันก็โอเคเพราะมันจะเป็น API สาธารณะ

PS2: ส่วนหัวของฉัน

ส่วนหัวการตอบกลับ

Access-Control-Allow-Credentials    true
Access-Control-Allow-Headers    Authorization
Access-Control-Allow-Methods    GET, POST, PUT
Access-Control-Allow-Origin http://localhost
Content-Length  164
Content-Type    application/json; charset=UTF-8
Date    Tue, 07 May 2019 20:33:52 GMT

ขอส่วนหัว (469 B)

Accept  application/json, text/javascript, */*; q=0.01
Accept-Encoding gzip, deflate
Accept-Language en-US,en;q=0.5
Connection  keep-alive
Content-Length  81
Content-Type    application/x-www-form-urlencoded; charset=UTF-8
Host    localhost:9003
Origin  http://localhost
Referer http://localhost/fibootkt/MY_app_dev.php/MyTest/GoAPI
User-Agent  Mozilla/5.0 (Macintosh; Intel …) Gecko/20100101 Firefox/66.0

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

ในกรณีของฉันมันคือADBLOCKERของฉัน! ด้วยเหตุผลบางประการมันถูกเปิดใช้งานบน localhost ของฉันและทำให้เกิดข้อผิดพลาดนี้ใน Firefox

ปิดการใช้งานหรือถอนการติดตั้งปลั๊กอินควรแก้ไขปัญหานี้

ในกรณีของคุณอาจไม่ใช่ adblocker แต่เป็นปลั๊กอินอื่นของ Firefox ทดสอบในโหมดไม่ระบุตัวตนก่อนโดยไม่ต้องใช้ปลั๊กอินเพื่อตรวจสอบว่าเป็นปัญหาหรือไม่จากนั้นปิดใช้งานปลั๊กอินอย่างเป็นระบบจนกว่าคุณจะพบผู้กระทำผิด

ไฟล์นี้อธิบายได้ด้วยตนเอง สร้างไฟล์เรียกว่าอะไรก็ได้ ในกรณีของฉัน jq2.php.

<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
    // document is made ready so that the program starts when we load this page       
    $(document).ready(function(){

        // it tells that any key activity in the "subcat_search" filed will execute the query.
        $("#subcat_search").keyup(function(){

            // we assemble the get link for the direction to our engine "gs.php". 
            var link1 = "http://127.0.0.1/jqm/gs.php?needle=" + $("#subcat_search").val();

            $.ajax({
                url: link1,
                // ajax function is called sending the input string to "gs.php".
                success: function(result){
                    // result is stuffed in the label.
                    $("#search_val").html(result);
                }
            });
        })   

    });
</script>
</head>

<body>

<!-- the input field for search string -->
<input type="text" id="subcat_search">
<br>
<!-- the output field for stuffing the output. -->
<label id="search_val"></label>

</body>
</html>

ตอนนี้เราจะรวมเครื่องยนต์สร้างไฟล์เรียกว่าอะไรก็ได้ที่คุณต้องการ ในกรณีของฉันมันคือ gs.php

$head = "https://maps.googleapis.com/maps/api/place/textsearch/json?query="; //our head
$key = "your key here"; //your key
$hay = $_GET['needle'];

$hay = str_replace(" ", "+", $hay); //replacing the " " with "+" to design it as per the google's requirement 
$kill = $head . $hay . "&key=" . $key; //assembling the string in proper way . 
print file_get_contents($kill);

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

แน่นอนว่าสิ่งที่เราทำได้ไม่มีที่สิ้นสุดเช่นการใส่ข้อมูลลงในตารางการส่งไปยังฐานข้อมูลและอื่น ๆ