cena:
A separação front-end e back-end e a interface local de desenvolvimento e chamada de front-end terão problemas de domínio cruzado. Geralmente existem três soluções:
1. Pacote a interface de back -end para executar localmente (desvantagens: toda vez que a atualização de back -end é atualizada, você deve ir para o próximo pacote de atualização para o servidor de teste e também precisa criar um ambiente de execução de Java localmente, o que é problemático)
2 CORS Domínio cruzado: Quando a interface de back-end retornar, adicione 'acesso a controle-arel-origin':* ao cabeçalho (às vezes o back-end é inconveniente para lidar com isso, e o front-end será doloroso)
3. Use o NodeJS para criar um servidor HTTP local e encaminhá-lo ao acessar o URL da interface, resolva perfeitamente o problema do domínio cruzado durante o desenvolvimento local.
Técnicas usadas:
1. Construa um servidor HTTP local com NodeJS
2. Aplique o node-http-proxy para encaminhar URLs de interface
Métodos específicos:
1. Node.js cria um servidor HTTP local. Consulte a Shawn.xie "NodeJS Builds um servidor HTTP local"
2. O node.js é usado para encaminhar nó-http-proxy. O documento oficial é: https://github.com/nodejitsu/node-http-proxy#using-https
3. O método de operação é referenciado: http://hao.jser.com/archive/10394/?utm_source=tuicool&utm_medium=referral
4. Aqui estão minhas próprias operações práticas
Preparação do projeto
1. Inicialização do NPM
NPM INIT
2. Instale o módulo Node-Http-Proxy
NPM Instale http-proxy-save-dev
3. Estrutura do projeto
No exemplo a seguir, colocamos o arquivo html diretamente no diretório raiz './' ou especificamos um diretório de sites, que pode ser personalizado no proxy.js
Configurar servidor HTTP e encaminhamento de proxy
var porta = 3000; var http = requer ('http'); var url = requer ('url'); var fs = requer ('fs'); var mina = requer ('./ mine'). tipos; var path = requer ('path'); var httproxy = requer ('http-proxy'; 'http://192.168.10.38:8180/', // Endereço da interface // As seguintes configurações são usadas para https // ssl: {// key: fs.readfilesync ('server_decrypt.key', 'utf8'), // cert: fs.readfilesync ( false}); proxy.on ('error', function (err, req, res) {res.Writehead (500, {'content-type': 'text/plana'}); console.log (err); reprynd ('algo deu errado. e estamos relatando uma mensagem de erro personalizada. url.parse (request.url) .pathname; // var realpath = path.Join ("Página principal", nome do caminho); 'Desconhecido'; // Julgue se for um acesso à interface, encaminhe if (pathname.indexof ("mspj-mall-admin")> 0) {proxy.web (request, resposta); return;} fs.exists (realpath, function (exist) {if (! 'text/plain'});response.write("This request URL " + pathname + " was not found on this server.");response.end();} else {fs.readFile(realPath, "binary", function (err, file) {if (err) {response.writeHead(500, {'Content-Type': 'text/plain'});response.end(err);} else {var ContentType = Mina [Ext] || "Texto/Plano"; Response.Writehead (200, {'Content-Type': ContentType}); Response.Write (FILE, "Binário"); Response.end ();););Mine.js
Aqui nos referimos ao código -fonte do shawn.xie e adicionamos alguns arquivos de fonte MIME.
exports.types = {"css": "text/css", "gif": "image/gif", "html": "text/html", "ico": "imagem/x-icon", "jpeg": "imagem/jpeg", jpg ":" imagem/jpeg ":" jpeg ":" jpeg ", jpg": "imagem" jpon ":" jpeg ":" jpeg "jpeg" jpg "jpg" jpg/jpon "jpeg" jpeg "jpeg" jpeg "jpeg" jpg ": jpg": jpg "jpg" jpg "jpg/jpg" JPG ":" "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": "Aplicativo/X-Font-trouTypey", "Otf": " "Application/vnd.ms-fontObject"};O acima é todo o código -fonte
Em seguida, altere o endereço da interface no projeto para http: // localhost: 3000/...
Inicie o serviço NodeJS
Inicie a CMD, localize o diretório do projeto e corra
nó proxy.js
acesso:
http: // localhost: 3000/index.html
Você pode ver que os dados serão obtidos em http: // localhost: 3000/...... no projeto e depois encaminhado para a área local.
Dessa forma, não há domínio cruzado.
O exposto acima é a introdução do editor ao Node.js e Node-http-proxy para resolver o problema do domínio cruzado do desenvolvimento local Ajax. Espero que seja útil para todos. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a todos a tempo. Muito obrigado pelo seu apoio ao site wulin.com!