Mit der kontinuierlichen Entwicklung und Beliebtheit der Front-End-Technologie hat Vue als einer von ihnen immer mehr Aufmerksamkeit und Anwendungen erhalten. Bei der Entwicklung von Vue-Projekten treten häufig domänenübergreifende Anforderungsprobleme auf. Wie kann damit umgegangen werden, damit das Projekt normal ausgeführt werden kann? In diesem Artikel werden einige Erfahrungen mit der domänenübergreifenden Anforderungsverarbeitung in der Vue-Projektentwicklung basierend auf persönlichen Erfahrungen geteilt.
Was ist zunächst einmal eine domänenübergreifende Anfrage? Vereinfacht ausgedrückt können Webseiten unter einem Domänennamen nicht auf Ressourcen unter einem anderen Domänennamen zugreifen. Insbesondere wenn das Front-End und das Back-End getrennt sind und die Front-End-Anwendung (z. B. die Vue-Anwendung) eine Anfrage an die Back-End-API initiiert, werden sie eingeschränkt, da beide unter unterschiedlichen Domänennamen laufen unterliegen der Same-Origin-Richtlinie des Browsers und können nicht normal aufgerufen werden. Zu diesem Zeitpunkt müssen Sie einige Mittel verwenden, um domänenübergreifende Anforderungen zu bearbeiten.
1. Verwenden Sie einen Proxy
Eine der gängigen Methoden zur Bearbeitung domänenübergreifender Anfragen ist die Verwendung eines Proxys. Das heißt, legen Sie die Proxy-Server-Adresse in der Konfigurationsdatei der Vue-Anwendung fest, initiieren Sie zunächst eine Anfrage an den Proxy-Server und der Proxy-Server leitet sie dann an die Back-End-API weiter. Auf diese Weise kann die Front-End-Anwendung normalerweise Daten von der Back-End-API anfordern. Im Vue-Projekt können Sie invue.config.jsfolgende Einstellungen vornehmen:vue.config.js中进行如下设置：
module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true, pathRewrite: { '/api': '/' } } } } }
其中，target参数指向后端API的地址，changeOrigin指示是否修改请求头中的Origin属性，pathRewrite用于重写请求路径，将以/api开头的路径替换成以/开头的路径。
二、使用JSONP
JSONP（JSON with Padding）是一种借助