项目中引入 axios--配置代理-Toy模板网

这篇具有很好参考价值的文章主要介绍了项目中引入 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({})中
写完重启项目文章来源地址https://www.toymoban.com/news/detail-450988.html

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