ralat merentas domain javascript

Dengan pembangunan berterusan teknologi bahagian hadapan, JavaScript telah menjadi teknologi teras untuk membina aplikasi web moden. Walau bagaimanapun, dalam amalan, kami sering menghadapi ralat merentas domain JavaScript. Artikel ini akan memperkenalkan punca, penyelesaian dan cara menghalang ralat merentas domain JavaScript daripada berlaku.

1. Punca ralat merentas domain JavaScript

Dalam JavaScript, ralat merentas domain merujuk kepada apabila halaman web di bawah satu nama domain memulakan permintaan HTTP ke halaman web di bawah nama domain lain dan akan dilayari Permintaan peranti. Ini kerana disebabkan oleh dasar asal yang sama penyemak imbas, sumber di bawah nama domain lain tidak boleh diakses secara langsung, iaitu perkongsian dan interaksi data hanya boleh dicapai di bawah nama domain, nombor port dan protokol yang sama.

Sebagai contoh, apabila kami berada di tapak web bernama "www.example.com" dan ingin menghantar permintaan Ajax ke tapak web bernama "www.another-example.com", sambungan silang akan berlaku Ralat domain.

2. Penyelesaian kepada ralat merentas domain JavaScript

1. Gunakan jsonp

jsonp ialah cara untuk menggunakan teg skrip untuk membuat permintaan merentas domain. Dalam jsonp, pelayan membungkus data responsnya dalam fungsi panggil balik dan kemudian mengembalikannya kepada klien, dan klien boleh mendapatkan data tersebut.

Sebagai contoh, kod berikut menunjukkan cara menggunakan jsonp untuk melaksanakan data permintaan merentas domain:

function getData() {
    var scriptElement = document.createElement('script');
    scriptElement.src = 'http://www.example.com/data?callback=handleData';
    document.querySelector('head').appendChild(scriptElement);
}

function handleData(data) {
    console.log(data);
}

2. Ubah suai tetapan pelayan untuk menyokong permintaan merentas domain

Mengkonfigurasi dasar CORS (perkongsian sumber merentas domain) pada bahagian pelayan membolehkan pelanggan mendapatkan data daripada nama domain lain. Contohnya, dalam Node.js, kita boleh menggunakan modul cors untuk melaksanakan permintaan merentas domain.

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());

app.get('/data', (req, res) => {
    res.send('data from another domain');
});

app.listen(3000, () => {
    console.log('server is running at http://localhost:3000');
});

3. Pelayan proksi

Gunakan pelayan proksi untuk memajukan permintaan merentas domain ke pelayan di bawah nama domain sasaran, dan kemudian kembalikan hasilnya kepada klien isu merentas domain.

Sebagai contoh, kita boleh menggunakan nginx atau Node.js sebagai pelayan proksi.

3. Bagaimana untuk mengelakkan ralat merentas domain JavaScript

Walaupun kita boleh menggunakan kaedah di atas untuk menyelesaikan masalah merentas domain, sebenarnya, cara terbaik ialah cuba mengelakkan merentas domain ralat semasa menulis kod tanya.

1. Gunakan laluan relatif

Gunakan laluan relatif untuk mendapatkan sumber dan bukannya laluan mutlak untuk mengelak daripada menghantar permintaan kepada nama domain lain.

Sebagai contoh, dalam kod berikut, imej sumber imej.jpg diperoleh melalui laluan relatif:

<img src="image.jpg" alt="example">

2. Gunakan API yang disediakan oleh penyemak imbas

Gunakan API yang disediakan oleh penyemak imbas untuk mendapatkan sumber dan bukannya membuat permintaan HTTP untuk mendapatkan sumber.

Sebagai contoh, gunakan API Fail untuk mendapatkan kandungan fail dan bukannya mendapatkannya melalui permintaan Ajax.

document.getElementById('upload').addEventListener('change', () => {
    const file = document.getElementById('upload').files[0];
    const reader = new FileReader();

    reader.onload = (e) => {
        console.log(e.target.result);
    };

    reader.readAsDataURL(file);
});

3. Gunakan nama subdomain di bawah nama domain yang sama

Gunakan nama subdomain yang berbeza di bawah nama domain yang sama untuk menyediakan perkhidmatan yang berbeza masing-masing, untuk mengelakkan permintaan merentas domain .

Sebagai contoh, gunakan xxx.example.com dan yyy.example.com untuk menyediakan perkhidmatan yang berbeza masing-masing.

Ringkasan

Ralat merentas domain JavaScript ialah masalah biasa yang dihadapi dalam pembangunan bahagian hadapan, dan terdapat banyak cara untuk menyelesaikan masalah ini. Kami boleh menggunakan jsonp, mengubah suai tetapan pelayan dan menggunakan pelayan proksi untuk menyelesaikan masalah merentas domain. Tetapi cara terbaik ialah cuba mengelakkan permintaan merentas domain semasa menulis kod, untuk mengelakkan ralat merentas domain daripada berlaku dengan lebih baik.

Atas ialah kandungan terperinci ralat merentas domain javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!