Saya mengakses gambar nasa dengan api publik mereka, tetapi saya mendapatkan kesalahan ini:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at
[nasa api website] (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Tetapi ketika saya memeriksa header respons mereka, 'Access-Control-Allow-Origin' ada dan disetel ke '*', di sini Anda dapat melihatnya:

KEPALA RESPONS:

Access-Control-Allow-Origin *
Age 0
Cache-Control   max-age=0, private, must-revalidate
Content-Encoding    gzip
Content-Type    application/json; charset=utf-8
Date    Sat, 28 Mar 2020 14:37:13 GMT
Etag    W/"e26hidden..."
Referrer-Policy strict-origin-when-cross-origin
Server  openresty
Strict-Transport-Security   max-age=31536000; includeSubDomains
Vary    Origin
Via https/1.1 api-umbrella (ApacheTrafficServer [cMsSf ]), 1.1 vegur
X-Cache MISS
X-Content-Type-Options  nosniff
X-Download-Options  noopen
X-Frame-Options SAMEORIGIN
X-Permitted-Cross-Domain-Policies   none
X-RateLimit-Limit   1000
X-RateLimit-Remaining   999
X-Request-Id    00c8c415-37ad-474b-bfbd-8e968d60f37f
X-Runtime   0.125778
X-Xss-Protection    1; mode=block

HEADER PERMINTAAN:

Accept  text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Encoding gzip, deflate, br
Accept-Language en-US,en;q=0.5
Connection  keep-alive
Host    api.nasa.gov
If-None-Match   W/"e26chidden.."
Upgrade-Insecure-Requests   1
User-Agent  Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:74.0) Gecko/999991 Firefox/74.0
2
dedepe 28 Maret 2020, 17:58

1 menjawab

Jawaban Terbaik

Ada kesalahan umum yang dapat terjadi saat menentukan URL untuk permintaan lintas-asal dalam kode, dan kesalahan tersebut dapat menyebabkan browser akhirnya melaporkan kesalahan CORS padahal sebenarnya masalahnya hanyalah kesalahan yang mudah diabaikan dalam permintaan URL-nya sendiri.

Kesalahannya hanyalah "s" yang hilang: menggunakan "http" sebagai bagian protokol URL daripada "https".

"s" yang hilang itu menyebabkan server yang Anda kirimi permintaan untuk merespons dengan pengalihan 3xx ke lokasi https yang setara dari URL itu — tetapi masalahnya adalah: secara default, banyak/sebagian besar server tidak akan sertakan header Access-Control-Allow-Origin dalam respons 3xx. Jadi browser mendapatkan 3xx itu, tetapi karena tidak memiliki header Access-Control-Allow-Origin, browser menolak untuk membiarkan kode Anda mengikuti pengalihan; alih-alih browser berhenti di sana dan mengeluarkan kesalahan CORS.

Jadi ketika Anda menemukan kasus seperti ini, cara untuk memecahkannya adalah: Buka panel Jaringan di devtools dan periksa responsnya. Periksa kode status respons yang ditampilkan di sana dan periksa header respons. Jika penyebabnya adalah kesalahan yang dijelaskan dalam jawaban ini, Anda akan melihat header respons Location. Nilai itu adalah URL tempat server mencoba mengarahkan permintaan.

Dan ketika Anda melihat nilai Location, awalnya Anda mungkin berpikir itu sama persis dengan URL permintaan yang Anda miliki di kode Anda — karena mudah untuk mengabaikan bahwa perbedaannya hanya satu "s" yang hilang. Tetapi tentu saja jika Anda mengambil URL dalam nilai Location itu dan mengganti URL permintaan di kode frontend Anda dengan itu, dan berhasil, maka perbedaannya menjadi jelas.

Jadi dalam kasus URL dalam pertanyaan ini, masalahnya hanyalah bahwa kode frontend menetapkan URL http://mars.jpl.nasa.gov yang seharusnya berupa URL https://mars.jpl.nasa.gov.

1
sideshowbarker 1 April 2020, 11:57