webpack - globally - Solicitudes de proxy a un servidor backend separado con vue-cli

vue or vue cli

Question

Estoy usando la plantilla vue-cli webpack-simple para generar mis proyectos, y me gustaría webpack-simple las solicitudes a un servidor backend separado. ¿Cómo se puede lograr esto fácilmente?

Answer 1

En @ vue / cli 3.x :

• Cree un archivo vue.config.js en la carpeta raíz de su proyecto, si aún no tiene uno.
• Tiene su contenido de la siguiente manera:

// vue.config.js
module.exports = {
devServer: {
proxy: {
"/gists": {
target: "https://api.github.com",
secure: false
}
}
}
};

Ahora cualquier llamada a (asumiendo que su servidor de desarrollo está en localhost:8080 ) http://localhost:8080/gists será redirigida a https://api.github.com/gists .

Otro ejemplo: proxy de todas las llamadas

Supongamos que tiene un servidor backend local que normalmente se implementa en localhost:5000 y desea redirigir todas las llamadas a /api/anything . Utilizar:

// vue.config.js
module.exports = {
devServer: {
proxy: {
"/api/*": {
target: "http://localhost:5000",
secure: false
}
}
}
};

Answer 2

Si utiliza la plantilla de webpack con vue-cli , puede encontrar la información requerida en este documento de referencia:

http://vuejs-templates.github.io/webpack/proxy.html

O en lugar de cambiar su plantilla ahora, puede copiar la configuración relevante de la plantilla de webpack en su plantilla local webpack-simple .

EDITAR: más información de mi configuración local

Esto es lo que tengo en mi config/index.js bajo module.exports :

dev: {
env: require(''./dev.env''),
port: 4200,
assetsSubDirectory: ''static'',
assetsPublicPath: ''/'',
proxyTable: {
''/api'': {
target: ''http://localhost:8080'',
changeOrigin: true
},
''/images'': {
target: ''http://localhost:8080'',
changeOrigin: true
},
// and so on...

La configuración anterior ejecuta mi vue-cli en el puerto 4200, y ejecuto mi servidor en el puerto 8080.

EDITAR: Información corregida sobre CORS después del comentario # 4 y # 5

Nota:

• La opción changeOrigin en dev.proxyTable (en webpack config) garantiza que no es necesario que sirva cabeceras CORS en las respuestas de API de su servidor.
• Si decide omitir changeOrigin por cualquier motivo, debe asegurarse de que la API de su servidor incluya Access-Control-Allow-Origin: * (o equivalente) en sus encabezados de respuesta.

Referencias:

1. https://.com/a/36662307/654825
2. https://github.com/chimurai/http-proxy-middleware