《vue》Configurar el proxy del servidor proxy devServer

En el entorno de desarrollo, vue-cli nos ayudará a crear un servidor de desarrollo (http://localhost:8080). Por lo tanto, cuando solicitamos el servidor back-end, pueden ocurrir problemas entre dominios. dominio cruzado Los tres elementos de un dominio son diferentes: nombre de dominio, puerto y protocolo.

Dirección de solicitud completa:

Mi dirección en sí contiene el campo api

Utilice la configuración devServer en vue-cli

Recuerde, si su dirección no es similar a mi dirección, hay una API como marca. Puede agregar manualmente algunas marcas a la dirección y luego usar pathRewrite para borrarla.

Esto generalmente no se hace y no tiene mucho sentido. Porque si hace esto, no solo las solicitudes ajax se realizarán de forma remota, sino que también se devolverán otros recursos como js, ​​css, imágenes, etc. . .

Con este método, durante la fase de desarrollo, no es necesario configurar la URL base en axios, o configurarla así:

Luego, durante la fase de desarrollo, las URL de algunos de sus solicitudes ajax coincidirán con el comienzo de /api, configure proxy

Nunca lo configure así:

Parece coincidir, pero en realidad no tiene efecto . . . (No sé por qué, los compañeros que lo saben me lo dirán)

De hecho, aquí no lo podéis ver. .

Porque la solicitud aquí en F12 en realidad se envía al servidor temporal local, y luego el servidor local la envía al servidor remoto.

Se puede entender de esta manera: el servidor local interceptó la solicitud F12, luego cambió en secreto la URL y luego solicitó al servidor remoto.

Precisamente porque el servidor local está libre de las limitaciones del navegador, ¡los problemas entre dominios se resuelven!