Firebase Storage และ Access-Control-Allow-Origin

ฉันพยายามดาวน์โหลดไฟล์จาก Firebase Storage ผ่าน XMLHttpRequest แต่ไม่ได้ตั้งค่า Access-Control-Allow-Origin บนทรัพยากรจึงไม่สามารถทำได้ มีวิธีใดบ้างในการตั้งค่าส่วนหัวนี้บนเซิร์ฟเวอร์จัดเก็บ

  (let [xhr (js/XMLHttpRequest.)]
    (.open xhr "GET" url)
    (aset xhr "responseType" "arraybuffer")
    (aset xhr "onload" #(js/console.log "bin" (.-response xhr)))
    (.send xhr)))

ข้อความแสดงข้อผิดพลาดของ Chrome:

XMLHttpRequest ไม่สามารถโหลด https://firebasestorage.googleapis.com/[EDITED] ไม่มีส่วนหัว "Access-Control-Allow-Origin" ในทรัพยากรที่ร้องขอ Origin ' http: // localhost: 3449 ' จึงไม่ได้รับอนุญาตให้เข้าถึง

จากโพสต์นี้ในกลุ่ม / รายการ firebase-talk :

วิธีที่ง่ายที่สุดในการกำหนดค่าข้อมูลของคุณสำหรับ CORS คือการgsutilใช้เครื่องมือบรรทัดคำสั่ง คำแนะนำสำหรับการติดตั้งgsutilมีที่https://cloud.google.com/storage/docs/gsutil_install เมื่อคุณติดตั้งgsutilและรับรองความถูกต้องแล้วคุณสามารถใช้เพื่อกำหนดค่า CORS

ตัวอย่างเช่นหากคุณต้องการอนุญาตให้ดาวน์โหลดออบเจ็กต์จากโดเมนที่กำหนดเองให้ใส่ข้อมูลนี้ในไฟล์ชื่อ cors.json (แทนที่"https://example.com"ด้วยโดเมนของคุณ):

[
  {
    "origin": ["https://example.com"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

จากนั้นเรียกใช้คำสั่งนี้ (แทนที่"exampleproject.appspot.com"ด้วยชื่อที่เก็บข้อมูลของคุณ):

gsutil cors set cors.json gs://exampleproject.appspot.com

และคุณควรตั้งค่า

หากคุณจำเป็นต้องมีการกำหนดค่า ธ ซับซ้อนมากขึ้นตรวจสอบเอกสารที่https://cloud.google.com/storage/docs/cross-origin#Configuring-CORS-on-a-Bucket

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

1. เปิดคอนโซล GCPและเริ่มเซสชันเทอร์มินัลระบบคลาวด์โดยคลิก>_ปุ่มไอคอนในแถบนำทางด้านบน
2. คลิกไอคอนดินสอเพื่อเปิดตัวแก้ไขจากนั้นสร้างcors.jsonไฟล์
3. วิ่ง gsutil cors set cors.json gs://your-bucket

เพียงแค่ต้องการเพิ่มคำตอบ เพียงไปที่โครงการของคุณใน Google Console (console.cloud.google.com/home) และเลือกโครงการของคุณ เปิดเทอร์มินัลและสร้างไฟล์ cors.json ( touch cors.json) จากนั้นทำตามคำตอบและแก้ไขไฟล์นี้ ( vim cors.json) ตามที่แนะนำโดย @ frank-van-puffelen

สิ่งนี้ได้ผลสำหรับฉัน ไชโย!

อีกวิธีหนึ่งในการทำเช่นนี้คือการใช้ Google JSON API ขั้นตอนที่ 1: รับโทเค็นการเข้าถึงเพื่อใช้กับ JSON API หากต้องการใช้โทเค็นให้ไปที่: https://developers.google.com/oauthplayground/ จากนั้นค้นหา JSON API หรือที่เก็บข้อมูลเลือกตัวเลือกที่ต้องการเช่น read, write, full_access (ทำเครื่องหมายที่ ซึ่งจำเป็น) ทำตามขั้นตอนเพื่อรับ Access Token ซึ่งจะใช้ได้เป็นเวลาหนึ่งชั่วโมง ขั้นตอนที่ 2: ใช้โทเค็นเพื่อกด google JSON API เพื่ออัปเดต CORS

Curl ตัวอย่าง:

    curl -X PATCH \
  'https://www.googleapis.com/storage/v1/b/your_bucket_id?fields=cors' \
  -H 'Accept: application/json' \
  -H 'Accept-Encoding: gzip, deflate' \
  -H 'Authorization: Bearer ya29.GltIB3rTqQ2tJgh0cMj1SEa1UgQNJnTMXUjMlMIRGG-mBCbiUO0wqdDuEpnPD6cbkcr1CuLItuhaNCTJYhv2ZKjK7yqyIHNgkCBup-T8Z1B1RiBrCgcgliHOGFDz' \
  -H 'Content-Type: application/json' \
  -H 'Postman-Token: d19f29ed-2e80-4c34-85ee-c46c9058fac0' \
  -H 'cache-control: no-cache' \
  -d '{
  "location": "us",
  "storageClass": "Standard",
  "cors": [
      {
          "maxAgeSeconds": "360000000",
          "method": [
             "GET",
             "HEAD",
             "DELETE"
          ],
          "origin": [
             "*"
          ],
          "responseHeader":[
            "Content-Type"
         ]
      }
  ]
}'

ฉันต้องการเพิ่มสำหรับผู้ที่ต้องการวิธีแก้ปัญหาอย่างสิ้นหวังหลังจากที่ลองทำทั้งหมดนี้แล้วและไม่สามารถแก้ปัญหาได้ ฉันพบบทความดีๆทางออนไลน์ที่เสนอวิธีแก้ปัญหา 3 ข้อและอันแรกใช้ได้ผลสำหรับฉัน .. ปลั๊กอิน Google Chrome .. ใช่! ..

moesif CORS extension ตรวจสอบให้แน่ใจว่าหลังจากติดตั้งแล้วคุณได้เปิดใช้งาน

หากต้องการเข้าถึงทรัพยากรใด ๆ ที่ใช้ส่วนหัว CORS คุณสามารถใช้โครงการเล็ก ๆ ที่ฉันสร้างใน Golang เพื่อตัวฉันเอง - https://proxify-cors.herokuapp.com/