Vue脚手架中的axios的引入,网络事件代理配置
首先去终端安装axios,指令:npm i axios然后在文件中引入 import axios from "axios”,便可以直接使用axios或者将axios写入原型中在进行axios请求时使用。
axios的引入
首先去终端安装axios,指令:npm i axios,
第一种:在需要进行axios请求的Vue文件内的script标签内引入axios即 import axios from "axios”,就可以使用了
第二种:在main.js文件中引入 import axios from "axios”,再将axios写入原型中Vue.prototype,这样每个Vue文件内都可以直接使用,不在需要每次都引入一次 import axios from "axios”
这样的话,在进行axios请求时使用this.$axios而不是axios
网络代理配置
由于Vue脚手架中运行时会有自己的服务器端口默认8080,
当我们自己开启后端服务器(node.js默认端口7001),想要在Vue环境中使用Ajax请求后端数据时就会产生跨域,那么我们就要在vue.config.js中进行网络代理配置
如:在没有进行网络事件代理时,使用axios请求后端数据,如
那么我们在界面中点击按钮,就会跨域
配置vue.config.js文件
所以我们在vue.config.js文件中进行网络代理配置
const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, lintOnSave: false,//取消严格模式 devServer: { port: 8080, //默认vue脚手架配置就8080 //代理配置,这里只是配置,不用写代理服务器的代码(配置好了它帮我们实现) proxy: { //配置api,可以配置多个Api '/api111': { target: 'http://localhost:7001',//跳转的目标网址 secure: true, //如果代理的target是https接口,需要配置它 pathRewrite: { '^/api111': '/' }, //请求时重写pathname: //项目组件中请求的是http://localhost/hqyj/api111 //8080服务器就会帮我们代理请求 http://localhost:7001/api111 //所以将api重写为'^/api111': '/' }, }, } })
此时再将api写入axios工具请求的网址中:
此时我们再点击按钮就能成功得到后端数据
此时我们也会存在一个问题,就是每次进行axios请求的时候我们都要在前边写api才能进行网络事件代理,所以我们可以在main.js文件中配置公共url axios.defaults.baseURL
main.js文件中配置axios公共url
import Vue from 'vue' import App from './App.vue' import axios from "axios" axios.defaults.baseURL="http://localhost:8080/api111" //配置公共url 如果这个axios去请求 "test" 它实际的网址是http://localhost:8080/api111/test Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app')
此时再将axios工具请求的网址中的api删掉:
此时依然可以成功请求到后端数据,但此方法只适合有且仅有一个api的时候使用
更多推荐
所有评论(0)