مشهد:
سيكون للفصل بين الواجهة الأمامية والخلفية ، وتطوير الواجهة الأمامية المحلية وواجهة الاتصال مشاكل في المجال. هناك بشكل عام ثلاثة حلول:
1. حزم واجهة الواجهة الخلفية لتشغيلها محليًا (العيوب: في كل مرة يتم تحديث تحديث الواجهة الخلفية ، يتعين عليك الانتقال إلى حزمة التحديث التالية لخادم الاختبار ، وعليك أيضًا إنشاء بيئة تشغيل Java محليًا ، وهي مزعجة)
2. كورس المتقاطع بين المجال: عندما تعود واجهة الواجهة الخلفية ، أضف "الوصول إلى السيطرة على الأصول":* إلى الرأس (في بعض الأحيان تكون الواجهة الخلفية غير مريحة للتعامل مع هذا ، وستكون الواجهة الأمامية مؤلمة)
3. استخدم NodeJS لإنشاء خادم HTTP محلي وإعادة توجيهه عند الوصول إلى عنوان URL للواجهة ، وحل مشكلة المجال المتقاطع تمامًا أثناء التطوير المحلي.
التقنيات المستخدمة:
1. بناء خادم HTTP محلي مع Nodejs
2. قم بتطبيق Node-HTTP-Proxy لإعادة توجيه عناوين URL للواجهة
طرق محددة:
1. Node.js يبني خادم HTTP محلي. ارجع إلى "NodeJS" من Shawn.xie يبني خادم HTTP محلي "
2. node.js يستخدم لإعادة توجيه العقدة 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 = require ('url') ؛ var fs = require ('fs') ؛ var mine = require ('./ mine'). type ؛ var path = require ('path') ؛ var httpproxy = require ('http-proxy) httpproxy.createproxyserver ({target: 'http://192.168.10.38:8180/' ، // عنوان واجهة // يتم استخدام الإعدادات التالية لـ https // ssl: fs.readfilesync ('server.crt' ، 'utf8') //} ، // secure: false}) ؛ proxy.on ('error' ، function (err ، req ، res) {res.writehead (500 ، {'content-type': 'text/plain'}) ؛ console.log (err) ؛ الرسالة. ') ؛}) ؛ var server = http.createserver (function (request ، response) {var pathname = url.parse (request.url) .PathName ؛ // var realpath = path.join ("pages main" ، pathname) ؛ pathname) ؛ console.log (pathname) ؛ console.log (RealPath) ؛ var ext = path.extName (RealPath) ؛ ext = ext. الرد) ؛ return ؛} fs.exists (RealPath ، function (موجود) {if (! {if (err) {response.writehead (500 ، {'content-type': 'text/plain'}) ؛ response (err) ؛} {var contentType = mine [ext] || "binary") ؛ reponse.end () ؛}}) ؛}}) ؛}) ؛ server.listen (port) ؛ console.log ("الخادم يعمل في المنفذ:" + port + ".") ؛منجم
نشير هنا إلى الكود المصدري لـ Shawn.xie ونضيف بعض ملفات Font Mime.
exports.types = {"css": "text/css" ، "gif": "Image/GIF" ، "html": "text/html" ، "ICO": "application/json" ، "pdf": "application/pdf" ، "png": "image/png" ، "svg": "Audio/X-MS-WMA" ، "WMV": "Video/X-MS-WMV" ، "XML": "Text/XML" ، "Woff": "Application/X-Woff" ، "Woff2": "التطبيق/vnd.ms-fontobject"} ؛ما سبق هو كل رمز المصدر
ثم قم بتغيير عنوان الواجهة في المشروع إلى http: // localhost: 3000/...
ابدأ خدمة NodeJS
ابدأ CMD ، تحديد موقع دليل المشروع ، وتشغيله
عقدة proxy.js
وصول:
http: // localhost: 3000/index.html
يمكنك أن ترى أنه سيتم الحصول على البيانات من http: // localhost: 3000/...... في المشروع ، ثم إعادة إرسالها إلى المنطقة المحلية.
بهذه الطريقة لا يوجد مجال متقاطع.
ما سبق هو مقدمة المحرر إلى Node.js و Node-HTTP-Proxy لحل مشكلة النطاق المتقاطع في التطوير المحلي AJAX. آمل أن يكون ذلك مفيدًا للجميع. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر على الجميع في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!