Introduire axios--agent de configuration dans le projet

1. L'ancienne méthode

1、下载zxios
    终端中输入 npm i axios -S  下载axios
    下载完自动引入到dependencies中

		所有npm下载的依赖都放到package.json中
    -S 放到package.json文件的dependencies中
    -D 放到package.json文件的devDependencies中
2、导入axios
  -将axios导入到 mine.js入口函数中(因为所有页面都要用，项目启动会执行入口函数)
    import axios from "axios";----地址中直接写文件  会从node_modules中找

  -挂载到Vue的原型上     在Vue原型中添加 $axios属性,将axios添加到$axios中
  	Vue.prototype.$axios = axios
3、使用
  	this.$axios.get().then(res=>{console.log(res)})

2. Configurer le proxy (résoudre le cross-domaine)

• 
  Politique de même origine inter-domaines : un protocole de sécurité pour les navigateurs. Si l'un des numéros de port de l'hôte du protocole (id/nom de domaine) ne correspond pas, la politique de même origine sera générée, ce qui entraînera des problèmes inter- domaines

• Résoudre le cross-domain :
  1. L'arrière-plan est directement libéré ----- pas sûr
  2. JS0NP ---------- Principe : src dans la balise de script n'est pas affecté par la politique de même origine (nécessite coopération back-end)
  3 , Configurer le proxy (couramment utilisé)
  problème : front-end ==> serveur back-end (avec problèmes inter-domaines)
  solution : front-end ==> proxy ==> serveur back-end
  proxy est en fait un serveur, il n'y aura aucune différence entre le serveur et le serveur Impact de la politique source

• Configurer le proxy :
  Étapes :

  • 1. Lorsque la
    page /course-api voit /course-api, elle fusionne l'adresse de l'agent devant
    http://course.myhope365.com/api/course-api
  • 2. Mettez le chemin spécifique derrière
    http://course.myhope365.com/api/course-api/weChat/applet/course/list/type
  • 3. Réécrivez l'extra /course-api
    http://course.myhope365.com/api/weChat/applet/course/list/type

Écrivez dans module.exports = defineConfig({}) du fichier vue.config.js
et redémarrez le projet après l'écriture

// 配置代理
  devServer:{
    
    
		//代理
    proxy:{
    
    
    	//代理的名字(自己起名)
      '/course-api':{
    
    
            //代理的地址
            target:'http://course.myhope365.com/api/',
            //是否跨域
            changeOrigin:true,
            //路径重写   以course-api开头，把它重写成空
            pathRewrite:{
    
    
              '^/course-api':''
        		}
       },

    	
    	//下面的写法，省略 路径重写
			//http://course.myhope365.com/api/
      '/api':{
    
    
            target:'http://course.myhope365.com',
            //   是否跨域
            changeOrigin:true,
      },
    }
  }