escena:
La separación front-end y back-end, y la interfaz local de desarrollo y llamadas front-end tendrán problemas de dominio cruzado. Generalmente hay tres soluciones:
1. Empaque la interfaz de backend para ejecutar localmente (desventajas: cada vez que se actualiza la actualización de backend, debe ir al siguiente paquete de actualización para el servidor de prueba, y también debe construir un entorno de ejecución de Java localmente, lo cual es problemático)
2. Cors Dominio cruzado: cuando regrese la interfaz de backend, agregue 'Origin de acceso de acceso de acceso:* al encabezado (a veces el backend es inconveniente para manejar esto, y el frontend será doloroso)
3. Use NodeJS para construir un servidor HTTP local y reenviarlo al acceder a la URL de la interfaz, resolver perfectamente el problema de dominio cruzado durante el desarrollo local.
Técnicas utilizadas:
1. Construya un servidor HTTP local con NodeJS
2. Aplicar Node-HTTP-Proxy para reenviar URL de la interfaz
Métodos específicos:
1. Node.js construye un servidor HTTP local. Consulte Shawn.xie "NodeJS construye un servidor HTTP local"
2. Node.js se usa para reenviar Node-HTTP-Proxy. El documento oficial es: https://github.com/nodejitsu/node-http-proxy#using-https
3. Se hace referencia al método de operación: http://hao.jser.com/archive/10394/?utm_source=tuicool&utm_medium=referral
4. Aquí están mis propias operaciones prácticas
Preparación del proyecto
1. Inicialización de NPM
NPM Init
2. Instale el módulo Node-HTTP-Proxy
NPM Instalar HTTP-Proxy--Save-Dev
3. Estructura del proyecto
En el siguiente ejemplo, colocamos el archivo HTML directamente en el directorio raíz './', o especificamos un directorio de sitios web, que se puede personalizar en proxy.js
Configurar el reenvío de servidor HTTP y proxy
var port = 3000; var http = require ('http'); var url = require ('url'); var fs = require ('fs'); var mine = request ('./ my'). tipos; var pATH = require ('path'); var httproxy = require ('httpPraxy'); var proxy = httpproxy.creaty 'http://192.168.10.38:8180/', // Dirección de interfaz // Las siguientes configuraciones se utilizan para https // ssl: {// key: fs.readfilesync ('server_decrypt.key', 'utf8'), // cert: fs.Readfilesnnc ('server.crt', 'utf8') falso}); proxy.on ('error', function (err, req, res) {res.writehead (500, {'content-type': 'text/sencillo'}); console.log (err); res.end ('algo salió mal. Y estamos informando un mensaje de error personalizado.');}); var server = http.createser (function (la función (solicitud, la respuesta, la respuesta). URL.PARSE (request.url) .pathName; // var realPath = path.join ("PAGAS PRINCIPALES", PATHNAME); 'desconocido'; // juzga si es un acceso a la interfaz, reenviar if (pathname.indexof ("mspj-mall-admin")> 0) {proxy.web (request, respuesta); return;} fs.Exists (realPath, function (exists) {if (! Exists) {Response.writehead (404, {'Content-type': 'text/»}; Solicitar url " + PathName +" no se encontró en este servidor. "); respuesta.end ();} else {fs.ReadFile (RealPath," binary ", function (err, file) {if (err) {Response.Writehead (500, {'Content-type': 'Text/sencillo'}); Response.end (err);} else {var ContentType = Mye [ext] | "Text/Plain"; Response.Writehead (200, {'Content-type': contentType}); respuesta.write (archivo, "binary"); respuesta.end ();}});}});}); server.listen (port); console.log ("Server que se ejecuta en puerto:" + port + ");Mía.js
Aquí nos referimos al código fuente de Shawn.xie y agregamos algunos archivos de fuentes mime.
exports.types = {"css": "text/css", "gif": "image/gif", "html": "text/html", "ico": "image/x-icon", "jpeg": "image/jpg", "jpg": "image/jpeg", "js": "text/javascript", "json", "json" "application/json","pdf": "application/pdf","png": "image/png","svg": "image/svg+xml","swf": "application/x-shockwave-flash","tiff": "image/tiff","txt": "text/plain","wav": "audio/x-wav","wma": "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"};Lo anterior es todo el código fuente
Luego cambie la dirección de la interfaz en el proyecto a http: // localhost: 3000/...
Iniciar servicio NodeJS
Iniciar CMD, ubicar el directorio del proyecto y ejecutar
nodo proxy.js
acceso:
http: // localhost: 3000/index.html
Puede ver que los datos se obtendrán de http: // localhost: 3000/...... en el proyecto, y luego se reenviarán al área local.
De esta manera no hay dominio cruzado.
Lo anterior es la introducción del editor a Node.js y Node-HTTP-Proxy para resolver el problema de dominio cruzado del desarrollo local AJAX. Espero que sea útil para todos. Si tiene alguna pregunta, déjame un mensaje y el editor responderá a todos a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!