Comment faire des requêtes cross-domaines dans Vue ?

Vue est un framework JavaScript populaire pour créer des applications Web modernes. Lors du développement d'applications à l'aide de Vue, vous devez souvent interagir avec différentes API, qui sont souvent situées sur des serveurs différents. En raison des restrictions des politiques de sécurité inter-domaines, lorsqu'une application Vue s'exécute sur un nom de domaine, elle ne peut pas communiquer directement avec l'API sur un autre nom de domaine. Cet article présentera plusieurs méthodes pour effectuer des requêtes inter-domaines dans Vue.

1. Utilisez un proxy

Une solution inter-domaines courante consiste à utiliser un proxy. Dans ce cas, l'application Vue contourne la politique de même origine du navigateur en effectuant une requête HTTP au même serveur. Le serveur reçoit les requêtes et les transmet à l'API réelle. Étant donné que le serveur proxy se trouve sur le même domaine que l'API, le navigateur n'émettra pas de restrictions de sécurité inter-domaines à ce sujet. Voici un exemple de la façon de configurer un proxy :

// vue.config.js module.exports = { devServer: { proxy: { '/api': { target: 'https://example.com', changeOrigin: true, pathRewrite: { '^/api': '' } } } } }

Dans l'exemple ci-dessus, nous allons proxy toutes les requêtes commençant par/apivershttps:// exemple.comon.changeOriginest défini surtruepour définir la source sur l'adresse detargetet définirpathRewritepour modifier/ apiest supprimé de la requête./api开头的请求代理到https://example.com上。changeOrigin设置为true表示将源设置为target的地址，并设置pathRewrite以将/api从请求中删除。

2. JSONP（仅限GET请求）

JSONP是一种旧的跨域解决方案，它使用GET请求在不同的域上动态添加一个