一、老辦法

1、下載zxios
    終端中輸入 npm i axios -S  下載axios
    下載完自動引入到dependencies中

		所有npm下載的依賴都放到package.json中
    -S 放到package.json文件的dependencies中
    -D 放到package.json文件的devDependencies中
2、導入axios
  -將axios導入到 mine.js入口函數(shù)中(因為所有頁面都要用，項目啟動會執(zhí)行入口函數(shù))
    import axios from "axios";----地址中直接寫文件  會從node_modules中找

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

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

• 跨域
  同源策略：瀏覽器的一種安全協(xié)議，協(xié)議 主機(id/域名) 端口號 其中一個對應不上就會產(chǎn)生同源策略，從而產(chǎn)生跨域問題

• 解決跨域：
  1、后臺直接放開-----不安全
  2、JS0NP ----------原理：script標簽中src不受同源策略的影響(需要后端配合)
  3、配置代理(常用)
  問題: 前端==>后端服務器(有跨域問題)
  解決辦法: 前端==>代理==>后端服務器
  代理其實也是個服務器，服務器和服務器之間不會有同源策略的影響

• 配置代理：
  步驟：

  • 1、 /course-api
    網(wǎng)頁見到/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({})中
寫完重啟項目文章來源地址http://www.zghlxwxcb.cn/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,
      },
    }
  }

到了這里，關于項目中引入 axios--配置代理的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！