conjunto vue-cli3 una cruz-dominio de proxy detallada

Las viejas reglas, primero en el código

// 在根目录下自行创建vue.config.js
module.exports = { // cli3 代理是从指定的target后面开始匹配的，不是任意位置；配置pathRewrite可以做替换 devServer: { port: '8080', open: true, proxy: { '/api': { // /api 的意义在于，声明axios中url已/api开头的请求都适用于该规则， // 注意是以/api开头，即：axios.post({url: '/api/xxx/xxx'}) target: '服务器真实地址', // 此处target的意义在于：造成跨域是因为访 // 问的host与我们的请求头里的origin不一致，所以我们要设置成一致，这个具体请看下文 changeOrigin: true, pathRewrite: {'^/api': 'https://我是服务器/api'} // 此处是大部分文章都不会明说的的地方， // 既然我们设置了代理，则所有请求url都已写成/api/xxx/xxx，那请求如何知道我们到底请求的是哪个服务器的数据呢 // 因此这里的意义在于， 以 /api开头的url请求，代理都会知道实际上应该请求那里， // ‘我是服务器/api’，后面的/api根据实际请求地址决定，即我的请求url：/api/test/test，被代理后请求的则是 // https://我是服务器/api/test/test } } } } 

Actuando ha sido una petición exitosa

 

Micro-carta _20191211182354.png foto

Como se muestra, se puede ver la Solicitud de acogida URL y el origen de encabezado de solicitud ha sido constante, por lo que el agente de configuración puede resolver el problema de dominios cruzados,
lo que resulta en solicitud de URL entre dominios es porque el host no coincide con nuestro origen, es decir, a menudo se dice, no homóloga, mediante la configuración del proxy, se convirtió en mi solicitud de
192.168.1.109:8080 (esta es mi IP local, explique) solicitando datos de 192.168.1.109:8080, que es resolver el no homóloga el problema,

Personas modo de conversación

La gente dice: Solicitamos el servidor proxy en lugar de la espalda de datos del servidor a mi, mi agente solicitud nativa nativa para mí conseguir mis datos a la máquina, así que ya no es necesario considerar el multidominio

De este modo

Autor: _ como se muestra en
el enlace: https: //www.jianshu.com/p/f002ae1c046f
Fuente: libros de Jane
tienen derechos de autor por el autor. reimpresión comercial póngase en contacto con el autor autorizada, reimpresión no comercial por favor indique la fuente.

 

= module.exports { 
  devserver: { 
    Proxy: {
       '/ API' : { 
        objetivo: 'http: // localhost: 8001', // dirección de destino --api ruta 
        WS: true , // // si se debe habilitar WebSockets 
        changeOrigin: true , // habilitar el proxy: crea un servidor virtual a nivel local, y luego envía los datos solicitados, los datos y al mismo tiempo recibir una solicitud, por lo que la interacción entre el servidor y los datos del servidor no habría problemas entre dominios 
        pathRewrite: { ' ^ / API ':' http: // localhost: 8080 / API '} // aquí reescribir ruta de puerto --vue 
      } 
    } 
  } 
}