resolución de problemas entre dominios uniapp

1. ¿Qué es el dominio cruzado?

Debido a las restricciones de la política del mismo origen del navegador. La política del mismo origen es una convención, que es la función de seguridad central y más básica del navegador. Si falta la política del mismo origen, las funciones normales del navegador pueden verse afectadas. Punto de conocimiento: el dominio cruzado solo aparecerá en el navegador, y no habrá problemas de dominio cruzado en el desarrollo de applets y aplicaciones

2. ¿Bajo qué circunstancias habrá cross-domain

En términos humanos, cuando los nombres de dominio son diferentes, aparecerán dominios cruzados. Tome el nombre de dominio de Baidu como ejemplo a continuación. Cuando alguno de los nombres de dominio: protocolo, nombre de host, nombre de dominio y puerto es diferente del nombre de dominio del sitio visitado actualmente, se producirá un dominio cruzado.

https://www.baidu.com:443

Cuando se produce un dominio cruzado, la consola del navegador informará un error como se muestra en la figura a continuación

Recuerde: este artículo solo describe la solución de front-end para problemas de dominios cruzados, y la solución de front-end para problemas de dominios cruzados solo es efectiva cuando se desarrolla localmente. La línea de lanzamiento del proyecto requiere que el servidor de front-end configure un proxy de solicitud como el proxy inverso de nginx o el back-end para permitir solicitudes entre dominios

La solución al cross-domain es "engañar" al navegador o eliminar las restricciones del navegador

Si desea obtener más información sobre problemas entre dominios, se recomienda ver los dos enlaces de video a continuación, que son muy detallados.

Tutorial práctico entre dominios: carga... Volver a cargar Cancelar https://www.douyin.com/video/7162766714785058085

Tutorial práctico entre dominios: carga... Volver a cargar Cancelar https://www.douyin.com/video/7163130203684834596

3. La plataforma H5 del proyecto uni-app resuelve soluciones multidominio

Método 1: utilice  el navegador integrado de HBuilderX , que elimina las restricciones entre dominios del navegador.

Método 2: agregue la configuración h5 al archivo manifest.json en el directorio raíz del proyecto y haga clic en mí  para ver la documentación de la aplicación uni.

"h5" : {
    "devServer":{
        "proxy":{
            "^/api":{
                "target":"http://127.0.0.1:8081",
                "ws": true,
                "changeOrigin": true,
                "pathRewrite":{"^/api":"/api"}
            }
        }
    }
}

Ejemplo de código de solicitud de página

uni.request({
	url:'/api/1.json',    // url 要与 proxy 匹配，不能写成 xx.com/api.1.json
	method:'GET',
	success: (res) => {
		console.log(res);
	}
})

 

4. Solución multidominio del proyecto Vue.js

Agregue la siguiente configuración al archivo vue.config.js en el directorio raíz del proyecto

/* 开发环境配置 */
devServer:{
    /* 代理目录 */
    proxy:{
        '^/api':{
            target:'http://127.0.0.1:8081',
            ws: true,
            changeOrigin: true
        }
    }
}

Código de solicitud de página, tome la biblioteca axios como ejemplo

request.get('/api/1.json',{
    params
}).then(res=>{
    console.log(res)
})

Five, la solución definitiva, eliminar las restricciones de dominio cruzado del navegador

Si su proyecto no es de ingeniería, como la pila de tecnología jQuery, este método es el más simple y rudo

Tome el navegador Chrome como ejemplo

【Pasos de configuración】

1. Crear un acceso directo de escritorio para Chrome
2. Haga clic derecho en el acceso directo y haga clic en [Propiedades] para abrir el panel [Propiedades]
3. chrome.exe Agregue parámetros de inicio (detrás) en [Objetivo] en el panel [Propiedades]

1. // 完整复制如下参数，注意空格

3. --args --disable-web-security --user-data-dir=C:\MyChromeDevUserData

Después de que la adición sea exitosa, reinicie el navegador Chrome y habrá una copia rápida como se muestra a continuación