ฉาก:
การแยกส่วนหน้าและส่วนหลังและการพัฒนาส่วนหน้าและการโทรในท้องถิ่นจะมีปัญหาข้ามโดเมน โดยทั่วไปมีวิธีแก้ปัญหาสามประการ:
1. แพ็คเกจอินเทอร์เฟซแบ็กเอนด์เพื่อรันในเครื่อง (ข้อเสีย: ทุกครั้งที่มีการอัปเดตการอัปเดตแบ็กเอนด์คุณต้องไปที่แพ็คเกจการอัปเดตถัดไปสำหรับเซิร์ฟเวอร์ทดสอบและคุณต้องสร้างสภาพแวดล้อมที่ใช้งาน Java ซึ่งเป็นปัญหา)
2. CORS Cross-Domain: เมื่ออินเตอร์เฟสแบ็กเอนด์กลับมาเพิ่ม 'การควบคุมการเข้าถึง-Ollow-Origin':* ไปที่ส่วนหัว (บางครั้งแบ็กเอนด์ก็ไม่สะดวกในการจัดการสิ่งนี้และส่วนหน้าจะเจ็บปวด)
3. ใช้ NodeJS เพื่อสร้างเซิร์ฟเวอร์ HTTP ในเครื่องและส่งต่อเมื่อเข้าถึง URL อินเตอร์เฟสแก้ไขปัญหาข้ามโดเมนอย่างสมบูรณ์ระหว่างการพัฒนาในท้องถิ่น
เทคนิคที่ใช้:
1. สร้างเซิร์ฟเวอร์ HTTP ในเครื่องด้วย nodejs
2. ใช้ Node-HTTP-Proxy เพื่อส่งต่อ URL อินเตอร์เฟส
วิธีการเฉพาะ:
1. node.js สร้างเซิร์ฟเวอร์ HTTP ในเครื่อง อ้างถึง "nodejs ของ Shawn.xie สร้างเซิร์ฟเวอร์ HTTP ในเครื่อง"
2. node.js ใช้เพื่อส่งต่อ Node-HTTP-Proxy เอกสารอย่างเป็นทางการคือ: https://github.com/nodejitsu/node-http-proxy#using-https
3. วิธีการดำเนินการอ้างอิง: http://hao.jser.com/archive/10394/?utm_source=tuicool&utm_medium=referral
4. นี่คือการดำเนินงานที่เป็นประโยชน์ของฉันเอง
การเตรียมโครงการ
1. การเริ่มต้น NPM
NPM init
2. ติดตั้งโมดูล Node-HTTP-Proxy
NPM ติดตั้ง http-proxy--save-dev
3. โครงสร้างโครงการ
ในตัวอย่างต่อไปนี้เราใส่ไฟล์ HTML โดยตรงในไดเรกทอรีราก './' หรือระบุไดเรกทอรีเว็บไซต์ซึ่งสามารถปรับแต่งได้ใน proxy.js
กำหนดค่าเซิร์ฟเวอร์ HTTP และการส่งต่อพร็อกซี
var port = 3000; var http = require ('http'); var url = reghed ('url'); var fs = ต้องการ ('fs'); var mine = ต้องการ ('./ mine') ประเภท; var path = ต้องการ ( 'http://192.168.10.38:8180/', // ที่อยู่อินเตอร์เฟส // การตั้งค่าต่อไปนี้ใช้สำหรับ https // ssl: {// key: fs.readfilesync ('server_decrypt.key', 'utf8') false}); proxy.on ('ข้อผิดพลาด', ฟังก์ชั่น (err, req, res) {res.writehead (500, {'เนื้อหาประเภท': 'ข้อความ/ธรรมดา'}); console.log (err); res.end ('บางอย่างผิดปกติ url.parse (request.url) .pathname; // var realpath = path.join ("หน้าหลัก", ชื่อพา ธ ); 'ไม่ทราบ'; // ตัดสินว่าเป็นการเข้าถึงอินเทอร์เฟซไปข้างหน้าถ้า (pathname.indexof ("mspj-mall-admin")> 0) {proxy.web (คำขอ, ตอบกลับ); return;} fs.exists (realpath, ฟังก์ชั่น (มีอยู่) ขอ URL " + PathName +" ไม่พบในเซิร์ฟเวอร์นี้ "); Response.end ();} else {fs.readfile (RealPath," ไบนารี ", ฟังก์ชั่น (err, ไฟล์) {ถ้า (err) {response.writehead (500, {'content-type': "text/plain"; response.writehead (200, {'content-type': contentType}); response.write (ไฟล์, "ไบนารี"); Response.end ();}});}});}); server.listen (พอร์ต); console.log (Mine.js
ที่นี่เราอ้างถึงซอร์สโค้ดของ shawn.xie และเพิ่มไฟล์ตัวอักษรสองสามไฟล์
exports.types = {"css": "text/css", "gif": "image/gif", "html": "text/html", "ico": "image/x-icon", "jpeg": "image/jpeg", "jpg": "Application/JSON", "PDF": "Application/PDF", "PNG": "Image/PNG", "SVG": "Image/SVG+XML", "SWF": "Application/X-Shockwave-Flash", "TIFF": "Audio/X-MS-WMA", "WMV": "VIDEA/X-MS-WMV", "XML": "TEXT/XML", "WOFF": "Application/X-WOFF", "WOFF2": "Application/X-WOFF2", "TFF": "Application/X-Font-Truetype" "Application/vnd.ms-fontobject"};ข้างต้นคือซอร์สโค้ดทั้งหมด
จากนั้นเปลี่ยนที่อยู่อินเตอร์เฟสในโครงการเป็น http: // localhost: 3000/...
เริ่มบริการ NodeJS
เริ่ม CMD ค้นหาไดเรกทอรีโครงการและเรียกใช้
Node Proxy.js
เข้าถึง:
http: // localhost: 3000/index.html
คุณจะเห็นว่าข้อมูลจะได้รับจาก http: // localhost: 3000/...... ในโครงการจากนั้นส่งต่อไปยังพื้นที่ท้องถิ่น
ด้วยวิธีนี้ไม่มีโดเมนข้าม
ข้างต้นคือการแนะนำตัวแก้ไขเกี่ยวกับ Node.js และ Node-HTTP-Proxy เพื่อแก้ปัญหาข้ามโดเมนของการพัฒนาท้องถิ่น Ajax ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!