Url projek JavaScript tidak boleh digunakan

Dalam pembangunan web moden, JavaScript ialah bahasa yang sangat penting. Ia boleh memberikan kami halaman interaktif dan dinamik. Walau bagaimanapun, dalam pembangunan sebenar, kita sering menghadapi beberapa masalah, salah satunya ialah masalah URL dalam projek JavaScript tidak boleh digunakan.

Masalah ini sebenarnya sangat biasa. Apabila kami cuba menggunakan URL dalam projek JavaScript, kami mungkin menghadapi mesej ralat berikut:

XMLHttpRequest cannot load http://example.com/resource. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

Ini bermakna penyemak imbas menolak permintaan sumber pada pelayan dalam projek JavaScript. Ini adalah untuk mengelakkan serangan permintaan merentas tapak (CSRF).

Jadi, bagaimana untuk menyelesaikan masalah ini? Berikut ialah beberapa penyelesaian:

1 Gunakan pelayan proksi

Pelayan proksi boleh menyelesaikan masalah permintaan merentas domain. Kami boleh menggunakan pelayan proksi sebagai jambatan dalam projek JavaScript untuk meminta sumber sasaran. Sebagai contoh, kita boleh menggunakan http-proxy-middleware middleware untuk melaksanakan pelayan proksi.

Perisian tengah ini boleh digunakan di bahagian belakang Node.js dan kemudian digunakan dalam projek JavaScript:

// 在JavaScript工程中使用
app.use('/api', proxy({ target: 'http://example.com', changeOrigin: true }));

Kod ini akan mengalih keluar semua URL bermula dengan /api dalam projek JavaScript Permintaan adalah dimajukan kepada http://example.com. Oleh kerana pelayan proksi digunakan pada bahagian belakang, ia tidak akan dipintas oleh penyemak imbas.

2. Tambah pengepala CORS

CORS (Perkongsian Sumber Silang Asal) ialah mekanisme perkongsian sumber merentas domain. Jika pelayan menyokong CORS, ia akan menambah pengepala Access-Control-Allow-Origin pada pengepala respons, yang boleh menentukan senarai sumber yang dibenarkan untuk diakses.

Jika anda mempunyai kebenaran untuk mengubah suai kod sisi pelayan, anda boleh menambah pengepala ini pada pengepala respons:

Access-Control-Allow-Origin: http://localhost:3000

Dengan cara ini, penyemak imbas tidak akan memintas permintaan projek JavaScript.

3. Gunakan JSONP

JSONP ialah teknologi yang membenarkan permintaan merentas domain. Prinsipnya ialah menggunakan atribut src bagi elemen skrip untuk tidak dihadkan oleh dasar asal yang sama, dan boleh memuatkan fail JavaScript daripada nama domain lain.

Jika anda tidak boleh mengubah suai kod sebelah pelayan, atau pelayan tidak menyokong CORS, anda boleh cuba menggunakan JSONP. Kaedah khusus ialah menambah kod berikut pada projek JavaScript:

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://example.com/resource?callback=onResponse';
document.head.appendChild(script);

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

Dalam contoh ini, kami menambah elemen skrip pada projek JavaScript dan menetapkan atribut src kepada URL sumber sasaran. Kami menetapkan parameter callback sebagai fungsi panggil balik, yang akan dipanggil selepas sumber sasaran dimuatkan. Data yang dikembalikan oleh sumber sasaran boleh diproses dalam fungsi panggil balik.

Ringkasnya, apabila url tidak boleh digunakan dalam projek JavaScript, anda boleh menggunakan salah satu daripada tiga penyelesaian di atas: gunakan pelayan proksi, tambah pengepala CORS atau gunakan JSONP. Memilih penyelesaian yang berbeza mengikut situasi yang berbeza boleh membantu kita menyelesaikan masalah ini dengan lancar.

Atas ialah kandungan terperinci Url projek JavaScript tidak boleh digunakan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!