Problèmes inter-domaines avec proxyTable dans le projet vue-cli

Qu'est-ce que le cross-domain ?

La politique de même origine stipule que si l'un des protocoles, noms de domaine et ports de deux URL est différent, ils sont considérés comme d'origine croisée. Cet article vous présente principalement un résumé des problèmes inter-domaines proxyTable dans le projet vue-cli. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et vous donner une référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Quelles sont les solutions cross-domaines ?

1.JSONP est l'abréviation de JSON avec padding (padded JSON ou JSON paramétré).

Le principe de JSONP pour implémenter des requêtes inter-domaines est simplement de créer dynamiquement la balise , puis d'utiliser le src de -politique d'origine.

JSONP se compose de deux parties : la fonction de rappel et les données. La fonction de rappel est la fonction qui doit être appelée dans la page lorsque la réponse arrive. Le nom de la fonction de rappel est généralement spécifié dans la requête. Les données sont les données JSON transmises à la fonction de rappel. Créez dynamiquement la balise , définissez son src et la fonction de rappel est définie dans src :

var script = document.createElement("script"); script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse"; document.body.insertBefore(script, document.body.firstChild); Dans la page, le JSON renvoyé est transmis à la fonction de rappel en tant que paramètre. , et nous passons la fonction de rappel Venez manipuler les données.

function handleResponse(response){ // 对response数据进行操作代码 console.log(response) } JSONP est toujours une méthode inter-domaines populaire. Bien que JSONP soit pratique à utiliser, il existe également quelques problèmes :

Tout d'abord, JSONP charge le code d'autres. domaines. Si l'autre domaine n'est pas sécurisé, il y a de fortes chances qu'un code malveillant soit introduit clandestinement dans la réponse, et il n'y aura aucun moyen de le poursuivre autre que d'abandonner complètement l'appel JSONP. Par conséquent, lorsque vous utilisez un service Web qui n’est pas exploité et entretenu par vous-même, vous devez vous assurer qu’il est sûr et fiable.

JSONP a l'avantage d'accéder directement au texte de la réponse, mais il n'est pas facile de confirmer si la requête JSONP a échoué car l'événement onerror de la balise script n'a pas été largement supporté par les navigateurs. , il ne peut prendre en charge que l'appel de méthode GET.

2.cros cross-domain

L'ensemble du processus de communication CORS est complété automatiquement par le navigateur et ne nécessite pas la participation de l'utilisateur. Pour les développeurs, il n'y a aucune différence entre la communication CORS et la communication AJAX provenant de la même source, et le code est exactement le même. Une fois que le navigateur découvre que la requête AJAX est d'origine croisée, il ajoutera automatiquement des informations d'en-tête supplémentaires, et parfois une requête supplémentaire sera effectuée, mais l'utilisateur ne la ressentira pas.

Par conséquent, la clé pour parvenir à la communication CORS est le serveur. Tant que le serveur implémente l'interface CORS, la communication entre origines est possible.

Un en-tête inter-domaines complet couramment utilisé :

4.postMessage

5.WebSockets

L'arrière-plan me donne uniquement l'interface et je ne peux pas modifier l'arrière-plan. Comment puis-je traverser les domaines ?

Dans le travail réel, la coopération front-end et back-end n'est pas si tacite si le backend me donne seulement l'interface et ne peut pas modifier le backend, comment puis-je. inter-domaines ? Dans les fichiers de configuration du projet vue et du projet React, il existe un paramètre de proxy, qui est utilisé pour le cross-domain dans l'environnement de développement. Sa configuration permettra le cross-domain. Pour les projets construits via l'échafaudage vue-cli, cela peut être réalisé en modifiant le proxyTable dans index.js dans le dossier de configuration :

module.exports = { dev: { env: { NODE_ENV: '"development"' }, //proxy // 只能在开发环境中进行跨域，上线了要进行反向代理nginx设置 proxyTable: { //这里理解成用‘/api'代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add'即可 '/api': { target: 'http://news.baidu.com',//你要跨域的网址 比如 'http://news.baidu.com', secure: true, // 如果是https接口，需要配置这个参数 changeOrigin: true,//这个参数是用来回避跨站问题的，配置完之后发请求时会自动修改http header里面的host，但是不会修改别的 pathRewrite: { '^/api': '/api'//路径的替换规则 //这里的配置是正则表达式，以/api开头的将会被用用‘/api'替换掉，假如后台文档的接口是 /api/list/xxx //前端api接口写：axios.get('/api/list/xxx') ， 被处理之后实际访问的是：http://news.baidu.com/api/list/xxx } } }, Utilisons les services locaux pour tester comment effectuer une démonstration inter-domaines

0 Échafaudage construit avec vue-cli, le numéro de port frontal de npm run dev est généralement : http://localhost:8080

. 1. Modifiez le code index.js proxyTable:{} dans le fichier de configuration et remplacez-le par :

module.exports = { dev: { proxyTable: { '/api': { target: 'http://localhost:8000', secure: true, changeOrigin: true, pathRewrite: { '^/api': '/api' } } }, 2 Écrivez vous-même un backend, utilisez express+node.js, aucun paramètre pour. tout en-tête inter-domaines, le code est le suivant :

Notez que vous devez préparer à l'avance un fichier list.json dans le dossier actuel pour lire les données et renvoyer les données. fs.readFile('./list.json','utf8',cb)

import axios from 'axios'; axios.interceptors.response.use((res)=>{ return res.data; // 在这里统一拦截结果 把结果处理成res.data }); export function getLists() { return axios.get('/api/list'); } 4. Appelez l'interface cross-domain dans le composant et imprimez les données

Introduisez l'API dans un fichier pour tester les données renvoyées par l'interface imprimée

import {getLists} from '../../api/index' export default { async created(){ let dataList=await getLists(); console.log(dataList,"我请求的数据"); }, 5. Vérifiez la console et imprimez les données. Il n'y a aucune garantie d'erreur, ce qui signifie que le cross-domain est réussi et que le service proxy est réussi

L'environnement de développement a été inter-domaines avec succès, que dois-je faire lorsqu'il est mis en ligne ?

Lorsque vous vous connectez, vous devez configurer le proxy inverse nginx et distinguer les variables d'environnement. Veuillez consulter l'image pour les paramètres spécifiques :

Recommandations associées :

À propos de la définition de proxyTable par vue2.0 pour utiliser axios pour les requêtes inter-domaines