Lokales gemeinsames Debuggen domänenübergreifender Probleme im Front-End und Back-End
Das Front-End und das Back-End stoßen beim lokalen gemeinsamen Debuggen auf einige Fallstricke, dh wenn sie die Schnittstelle des lokalen Dienstes anfordern, treten domänenübergreifende Probleme auf. Tatsächlich ist es einfach zu lösen. Ich verwende vue2.x , und beziehen Sie sich auf die Konfiguration von Vue CLI , die auch in erläutert wird
Konfigurieren Sie es einfach in der Datei vue.config.js gemäß der Dokumentation
module.exports = {
devServer: {
proxy: {
'/local': {
target: 'url', // url:需要代理的域名，也就是联调接口的域名
changeOrigin: true, // 需要跨域要配置为true
pathRewrite: {
'^/local': '' // 类似替换字符串，将/local字符替换为空
}
}
}
}
}
// 请求案例
axios.get('/local/XXXX').then(res => {
console.log(res)
})
注意：如果在axios中配置了baseUrl需要将baseUrl设置为空，否则接口请求会返回404，在请求拦截中同理
config.baseURL = ''
Versuchen Sie nach Abschluss der obigen Konfiguration eine Anfrage, um festzustellen, ob das domänenübergreifende Problem gelöst ist. Nach erfolgreicher Anfrage werden die Daten erfolgreich zurückgegeben, Sie werden jedoch feststellen, dass der Pfad der Anfrage immer noch die lokale Dienstadresse ist. Dies hat keine Auswirkungen und der Proxy war tatsächlich erfolgreich.