pemandangan:
Pemisahan front-end dan back-end, dan antarmuka pengembangan dan panggilan front-end lokal akan memiliki masalah domain silang. Umumnya ada tiga solusi:
1. Kemas antarmuka backend untuk berjalan secara lokal (Kekurangan: Setiap kali pembaruan backend diperbarui, Anda harus pergi ke paket pembaruan berikutnya untuk server uji, dan Anda juga harus membangun lingkungan yang menjalankan Java secara lokal, yang merepotkan)
2. CORS Cross-domain: Ketika antarmuka backend kembali, tambahkan 'akses-kontrol-awal-origin':* ke header (kadang-kadang backend tidak nyaman untuk menangani ini, dan frontend akan menyakitkan)
3. Gunakan NodeJs untuk membangun server HTTP lokal dan meneruskannya saat mengakses URL antarmuka, dengan sempurna menyelesaikan masalah lintas domain selama pengembangan lokal.
Teknik yang digunakan:
1. Bangun server http lokal dengan nodeJS
2. Terapkan node-http-proxy untuk meneruskan URL antarmuka
Metode khusus:
1. Node.js membangun server HTTP lokal. Lihat Shawn.xie "NodeJs Membangun Server HTTP Lokal"
2. Node.js digunakan untuk meneruskan node-http-proxy. Dokumen resmi adalah: https://github.com/nodejitsu/node-http-proxy#using-https
3. Metode operasi dirujuk: http://hao.jser.com/archive/10394/?utm_source=tuicool&utm_medium=referral
4. Ini operasi praktis saya sendiri
Persiapan Proyek
1. Inisialisasi NPM
Init NPM
2. Instal Modul Node-HTTP-Proxy
NPM menginstal http-proxy --save-dev
3. Struktur Proyek
Dalam contoh berikut, kami meletakkan file html secara langsung di direktori root './', atau menentukan direktori situs web, yang dapat disesuaikan di proxy.js
Konfigurasikan server http dan penerusan proxy
var port = 3000; var http = membutuhkan ('http'); var url = membutuhkan ('url'); var fs = membutuhkan ('fs'); var mine = membutuhkan ('./ tambang'). Jenis; var path = membutuhkan ('Path'); var httpproxy = membutuhkan ('http-proxy'); target (var httpproxy = membutuhkan ('http-proxy'); target (var httpproxy = membutuhkan ('http-proxy'); varcrox = httpprox = membutuhkan ('http-proxy'); 'http://192.168.10.38:8180/', // Alamat antarmuka // Pengaturan berikut digunakan untuk https // ssl: {// key: fs.readfileSync ('server_decrypt.key', 'UTF8'),//CERT: fs.Readfiles, 'server.', 'UTF8'), // CERT: FS./server./server. aman: false}); proxy.on ('error', function (err, req, res) {res.writeHead (500, {'tipe konten': 'teks/polos'}); console.log (err); res.end ('sesuatu yang salah. Dan kami melaporkan pesan kesalahan khusus.'); {var server = hTeNA. url.parse (request.url) .pathname; // var realpath = path.join ("halaman utama", pathname); 'tidak diketahui'; // menilai apakah itu adalah akses antarmuka, maju jika (pathname.indexof ("mspj-mall-admin")> 0) {proxy.web (request, response); return;} fs.exists (realpath, fungsi (ada) {if (! ada) {response.writeHead (404, "{'{' {'{! Url " + pathname +" tidak ditemukan di server ini. "); Response.end ();} else {fs.readfile (realpath," biner ", function (err, file) {if (err) {response.writeHead (500, {'content-type': 'Text/Plain'}); responseHead (err)} lain lainnya "Teks/polos"; response.writeHead (200, {'tipe konten': contentType}); response.write (file, "biner"); response.end ();}});}});}); server.listen (port); konsol.log ("server berjalan di port:" + port + "."Milik saya
Di sini kami merujuk pada kode sumber Shawn.xie dan menambahkan beberapa file font.
ekspors.types = {"css": "text/css", "gif": "gambar/gif", "html": "text/html", "ico": "gambar/x-icon", "jpeg": "gambar/jpeg", "jpg": "jpeg", "jpeg", "jpeg", "jpeg", "jpeg", "jpeg", "jpeg", "jpeg", "jpeg", "jpeg", "jpeg", "jpeg", "jpeg", " "Application/Json", "PDF": "Application/PDF", "PNG": "Image/Png", "Svg": "Image/SVG+XML", "SWF": "Aplikasi/X-Shockwave-Flash", "Tiff": "Image/Tiff", "TXT": "WA:" WA: "WAV:" WAV "AUD": "WAV": "WAV," WAV "WAV": "WAV," WAV ":" WAV, "WAV": "WAV", "WAV": "WAV": "WAV", "WAV": "WAV": "WAV": "WAV": "WAV", "WAV": "WAV", "WAV": "WAV", "WAV": "WAV": "WAV", "WAV": "WAV", "WAV": "WAV", " "audio/x-ms-wma","wmv": "video/x-ms-wmv","xml": "text/xml","woff": "application/x-woff","woff2": "application/x-woff2","tff": "application/x-font-truetype","otf": "application/x-font-opentype","eot": "Application/Vnd.MS-FontObject"};Di atas adalah semua kode sumber
Kemudian ubah alamat antarmuka dalam proyek menjadi http: // localhost: 3000/...
Mulai Layanan NodeJS
Mulai CMD, Temukan Direktori Proyek, dan Jalankan
node proxy.js
mengakses:
http: // localhost: 3000/index.html
Anda dapat melihat bahwa data akan diperoleh dari http: // localhost: 3000/...... dalam proyek, dan kemudian diteruskan ke area lokal.
Dengan cara ini tidak ada domain silang.
Di atas adalah pengantar editor ke node.js dan node-http-proxy untuk menyelesaikan masalah lintas domain dari pengembangan lokal Ajax. Saya harap ini akan membantu semua orang. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas semua orang tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!