项目中引入 axios--配置代理

一、老办法

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)})

二、配置代理(解决跨域)

• 跨域
  同源策略：浏览器的一种安全协议，协议 主机(id/域名) 端口号 其中一个对应不上就会产生同源策略，从而产生跨域问题

• 解决跨域：
  1、后台直接放开-----不安全
  2、JS0NP ----------原理：script标签中src不受同源策略的影响(需要后端配合)
  3、配置代理(常用)
  问题: 前端==>后端服务器(有跨域问题)
  解决办法: 前端==>代理==>后端服务器
  代理其实也是个服务器，服务器和服务器之间不会有同源策略的影响

• 配置代理：
  步骤：

  • 1、 /course-api
    网页见到/course-api 就会在前边拼接 代理的地址
    http://course.myhope365.com/api/course-api
  • 2、 后边放具体路径
    http://course.myhope365.com/api/course-api/weChat/applet/course/list/type
  • 3、 把多出来的 /course-api 重写掉
    http://course.myhope365.com/api/weChat/applet/course/list/type

写到 vue.config.js文件的 module.exports = defineConfig({})中
写完重启项目

// 配置代理
  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,
      },
    }
  }