Descripción del problema:
Durante el desarrollo del reproductor, se llamó a la interfaz de Kugou Music para obtener datos, pero el navegador informó un error.
Porque el mecanismo del mismo origen del navegador provoca problemas entre dominios.
¿Qué es un problema entre dominios?
Debido al mecanismo del mismo origen del navegador. Si el nombre de dominio, el protocolo y el número de puerto al que accede la página actual son inconsistentes, se producirá un dominio cruzado. Aunque es entre dominios, el servidor back-end aún devuelve los datos. El navegador descubre que es entre dominios y evitará la transferencia de datos por razones de seguridad.
Como lidiar con
1.jsonp: utilice la etiqueta <script> para enviar solicitudes HTTP a diferentes dominios.
2. Agente local
El navegador prohíbe el dominio cruzado, pero el servidor no lo prohíbe, por lo que el front-end inicia un servicio localmente como objeto de la solicitud. Cree el archivo vue.config.js en el directorio raíz del proyecto vue. El contenido es el siguiente:
module.exports = {
devServer: {
// 配置多个代理
proxy: { //配置跨域
'/api': {
target: 'http://m.kugou.com/', //这里后台的地址模拟的;应该填写你们真实的后台接口
changOrigin: true, //允许跨域
pathRewrite: {
/* 重写路径，当我们在浏览器中看到请求的地址为：http://localhost:8080/api/singer 时
实际上访问的地址是：http://m.kugou.com//singer,因为重写了 /api
*/
'^/api': ''
}
},
}
}
};En la configuración de axios, modifique la ruta raíz de la solicitud para:
// 配置请求的根路径
axios.defaults.baseURL = '/api'Después de reiniciar, inicie una solicitud:
async getData() {
const { data: res } = await this.$axios.get("", {
params: { json: true },
});
console.log(res)
},¡Adquisición de datos exitosa!
3. Proxy de interfaz de datos remota, como jsonbird