Bagaimana untuk Mengendalikan Ralat CORS dengan 302 Lencongan ke Halaman Log Masuk SSO dalam ReactJS?

Ralat CORS dalam ReactJS GET Request dengan 302 Redirect

Anda menghadapi ralat CORS apabila apl ReactJS anda menghantar permintaan GET ke bahagian belakang anda pelayan (b.com) yang bertindak balas dengan ubah hala 302 ke halaman log masuk SSO (sso.example.com). Anda tidak mempunyai kawalan ke atas pengepala respons halaman SSO, yang bermaksud anda tidak boleh menambah pengepala Access-Control-Allow-Origin untuk menyelesaikan isu CORS.

Penyelesaian:

Untuk memintas pengehadan CORS ini, adalah disyorkan untuk mengendalikan ubah hala pada bahagian klien dalam penyemak imbas. Ini akan menghalang isu CORS kerana anda mengakses halaman SSO terus daripada URLnya.

Penyelesaian JavaScript:

Anda boleh menggunakan JavaScript biasa untuk mengubah hala permintaan GET anda menggunakan objek tetingkap:

<code class="javascript">window.location.href = "https://www.example.com";</code>

Pendekatan ini mudah dan mudah dilaksanakan, tetapi ia mungkin menjejaskan sejarah penyemak imbas anda. Sebagai alternatif, anda boleh menggunakan pustaka navigasi React untuk mengendalikan ubah hala secara pengaturcaraan:

<code class="javascript">import { useHistory } from "react-router-dom";

const history = useHistory();

useEffect(() => {
  history.push("https://www.example.com");
}, []);</code>

Kaedah ini membolehkan anda mengawal ubah hala dengan lebih tepat dan mengelakkan sebarang kemungkinan isu dengan sejarah penyemakan imbas. Dengan memproses ubah hala pada bahagian klien, anda menghapuskan keperluan untuk melaksanakan pengepala CORS pada halaman SSO, yang di luar kawalan anda.

Atas ialah kandungan terperinci Bagaimana untuk Mengendalikan Ralat CORS dengan 302 Lencongan ke Halaman Log Masuk SSO dalam ReactJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!