Avec le développement continu et les progrès du développement Web, de plus en plus de technologies et de frameworks front-end sont largement utilisés. En tant que framework JavaScript moderne, Vue.js est devenu un choix populaire pour le développement front-end. Dans le processus de développement des applications Vue.js, le cross-domaine est un problème souvent rencontré. Cet article présentera les problèmes inter-domaines dans Vue.js 2.0 et leurs solutions.
1. Qu'est-ce que le cross-domain
Dans le développement d'applications Web, lorsqu'une page demande l'accès aux ressources d'un autre nom de domaine à partir d'un site Web avec un seul nom de domaine, les ressources ne peuvent pas être obtenues correctement en raison des restrictions de la politique de même origine de le navigateur. C'est ce qu'on appelle le cross-domain.
Plus précisément, la politique de même origine est la fonctionnalité de sécurité principale et la plus élémentaire du navigateur. La politique de même origine exige que deux URL soient autorisées à accéder l'une à l'autre uniquement si elles ont le même protocole, le même nom de domaine et le même port. Dans le cas contraire, des problèmes inter-domaines se produiront.
En termes simples, supposons qu'un site Web s'appelle le site Web A et qu'un autre site Web s'appelle le site Web B. Lorsque le site Web A demande des données au site Web B via le navigateur, puisque le site Web B n'est pas dans le domaine où se trouve le site Web A, les paramètres par défaut du navigateur De telles demandes d'accès seront refusées.
2. Problèmes inter-domaines dans Vue.js 2.0
Étant donné que Vue.js 2.0 est une application monopage, ses environnements de développement et de production par défaut utilisent le serveur Node.js local pour le développement et les tests. Dans ce cas, nous rencontrons souvent des problèmes inter-domaines.
Par exemple, nous utilisons axios pour envoyer des requêtes Ajax pour demander des données JSON au serveur backend. Le code est le suivant :
import axios from 'axios'
axios.get('http://localhost:8080/api/data')
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});Dans le code ci-dessus, nous essayons d'envoyer une requête à l'adresse http:/. Le serveur de /localhost:8080/api/ data envoie une requête GET, mais comme le navigateur n'autorise pas un tel accès inter-domaines par défaut, une erreur se produira lors de l'exécution. http://localhost:8080/api/data 的服务器发送 GET 请求，但是由于默认情况下浏览器是不允许这种跨域访问的，所以在运行的时候就会出现错误。
三、如何解决跨域问题
为了解决跨域问题，我们需要指定一个代理服务器，在本地启动该服务器，然后把所有的跨域请求都转发到该服务器上。因为代理服务器和后端服务器都在同一个域中，所以就不存在跨域问题了。
在 Vue.js 2.0 中，我们可以使用 webpack-dev-server 中的 proxyTable 配置项来指定代理服务器。proxyTable 是一个对象，其中的每个属性都是代理规则，形如：
proxyTable: {
'/api': 'http://localhost:9000'
}上面的代码中，我们将以 /api 开头的所有请求都转发到地址为 http://localhost:9000 的服务器上。
四、示例代码
下面是一个关于如何使用 proxyTable 配置代理服务器的示例代码：
// 代码文件：vue.config.js
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:9000', // 代理目标地址
pathRewrite: { '/api': '' }, // 请求路径重写
changeOrigin: true, // 允许跨域
},
},
},
}在以上代码中，我们首先需要在 Vue.js 2.0 项目根目录下添加一个 vue.config.js 文件，该文件用来配置开发环境下的服务器。在 devServer 中，我们添加了一个 proxy 属性，该属性是一个对象，里面包含了我们的代理规则。我们可以根据后台 API 的实际情况来设置代理目标地址，例如 http://localhost:9000。
我们还可以设置 pathRewrite 属性，指定请求路径的重写规则。例如，当我们的请求路径为 /api/data 时，我们可以使用 { '/api': '' } 把 /api 前缀去掉，请求路径变成了 /data。
在最后，我们还需要设置 changeOrigin 属性为 true，来允许跨域访问。然后我们就可以愉快地使用 axios 发送跨域请求了：
import axios from 'axios'
axios.get('/api/data')
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});五、总结
本文介绍了 Vue.js 2.0 中的跨域问题及其解决方法。由于同源策略的限制，我们无法直接从前端应用程序中访问其他域名下的资源，但是我们可以使用代理服务器来绕过这个问题。在 Vue.js 2.0 中，我们可以使用 webpack-dev-server 的 proxyTable
proxyTable dans webpack-dev-server pour spécifier le serveur proxy. proxyTable est un objet, chaque attribut qu'il contient est une règle de proxy, sous la forme : 🎜rrreee🎜Dans le code ci-dessus, nous transmettons toutes les requêtes commençant par /api à l'adresse Sur le serveur sur http://localhost:9000. 🎜🎜4. Exemple de code🎜🎜Ce qui suit est un exemple de code sur la façon d'utiliser proxyTable pour configurer le serveur proxy :🎜rrreee🎜Dans le code ci-dessus, nous devons d'abord ajouter un vue.config dans le répertoire racine de le fichier .js du projet Vue.js 2.0, qui est utilisé pour configurer le serveur dans l'environnement de développement. Dans devServer, nous avons ajouté un attribut proxy, qui est un objet qui contient nos règles de proxy. Nous pouvons définir l'adresse cible du proxy en fonction de la situation réelle de l'API backend, telle que http://localhost:9000. 🎜🎜Nous pouvons également définir l'attribut pathRewrite pour spécifier les règles de réécriture pour le chemin de la requête. Par exemple, lorsque notre chemin de requête est /api/data, nous pouvons utiliser { '/api': '' } pour mettre /api Le préfixe est supprimé et le chemin de la requête devient /data. 🎜🎜À la fin, nous devons également définir l'attribut changeOrigin sur true pour autoriser l'accès entre domaines. Ensuite, nous pouvons volontiers utiliser axios pour envoyer des requêtes inter-domaines : 🎜rrreee🎜 5. Résumé 🎜🎜Cet article présente les problèmes inter-domaines dans Vue.js 2.0 et leurs solutions. En raison des restrictions de la même politique d'origine, nous ne pouvons pas accéder directement aux ressources sous d'autres noms de domaine depuis l'application frontale, mais nous pouvons utiliser un serveur proxy pour contourner ce problème. Dans Vue.js 2.0, nous pouvons utiliser l'élément de configuration proxyTable de webpack-dev-server pour spécifier le serveur proxy afin de résoudre les problèmes inter-domaines. 🎜Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
