Método de dominio cruzado @ vue / cli combinado con express

Este método es adecuado para el desarrollo y no para la producción 
1.　　@ vue / cli build vue

@ vue / cli build vue project El artículo anterior ha introducido 

2.　　Express Build Background Node Program (asegúrese de que la instalación del nodo esté completa)

npm install express // instalar express 

npm install express-generator -g // módulo de complemento express andamio express

express myapp // Crear un nuevo proyecto myapp 

cd myapp // Ingresar el nuevo proyecto 

npm install // Instalar el nuevo proyecto depende de 

npm start // Iniciar el proyecto acceso predeterminado localhost: archivo de configuración de 3000 bin Abra el número de puerto donde puede ver la configuración

 　　Estructura del proyecto

Abra app.js

Este es el motor de plantillas predeterminado, que se puede cambiar a html

O ejs pero para descargar

$ npm install --save ejs

 

bin:　　 archivo de inicio, cómo iniciar el archivo, el valor predeterminado es npm start
public:　　 almacena los archivos estáticos del proyecto, imagea / js / css y otras
rutas de archivos :　　 información de enrutamiento del proyecto,
vistas de enrutamiento de dirección de control :　　 ver archivos, archivos de plantilla jade, etc. Equivalente a html
app.js:　　 archivo de entrada (archivo principal)
package.json:　　 lista de plantillas dependientes

3.　  Escribir una interfaz de fondo Enviar una solicitud en la recepción 

Interfaz

app.get ("/ test", function (req, res) { 
    res.json ({ "jaja": "Hola, soy una prueba" }); 
});

Envíe una solicitud al archivo vue en primer plano a http: // localhost: 3000 / test

El error se debe a un problema de dominio cruzado

 4. Resuelva el programa de fondo de dominio cruzado (importante) express

solicitud de instalación de npm // solicitud de instalación para un mejor funcionamiento http

Introducir solicitud en el encabezado app.js

var request = require ('solicitud');

Entonces un paso importante

npm install cors // Instala cors para resolver dominios cruzados

La configuración cambia app.js　　

+ var cors require ("cors"); 
+ app.use (cors ({ 
　　　　origin: ['http: // localhost: 8080'], // Permitir solicitudes bajo estos 
　　　　métodos de nombre de dominio : ["GET", "POST" ], // Tipos de solicitud permitidos 
　　　　allowHeaders: ['Conten-Type', 'Authorization'] // Request header 
　　}));

Luego reinicie el proyecto y abra el proyecto front-end para descubrir que la solicitud fue exitosa

Se ha completado en este momento,  pero el problema es que las direcciones solicitadas son todas http: // localhost: 3000 

Por lo tanto, use  request  para reenviar la solicitud a la dirección que realmente desea solicitar

Agregue código en la interfaz / archivo de prueba

var request = require ("solicitud");

/ * OBTENER listado de usuarios. * /
router.get ('/', function (req, res, next) {
+ let url = "http: // localhost: 8080 / user / a";
+ request (url, function (err, response, body) {
+ if (! err && response.statusCode == 200) {
+ let data = JSON.parse (response.body);
+ res.json (data);
+}
　　　　});
});