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