在Vue中使用axios全局挂载默认配置代理跨域
axios可以使数据请求更简单方便,学习使用axios优化自己的项目。
·
Axios 是什么?
Axios 是一个基于 promise 的 HTTP 库,简单的讲就是可以发送get、post请求。由于vue不再操作操作dom,也就不用导入jQuery,所以axios轻量级库更加适合。
Axios使用步骤
npm i axios -S
import axios from 'axios'
注意:从node_modules导入的包不需要加../.../
get请求的几种写法
axios.post(url,data,config).then().catch()
//data格式与config配套的(用哪种格式看接口文档)
axios.post(
"/index_login.php",
"name=mewow&age=18",
{headers:{'Content-Type':'application/x-www-form-urlencoded'}}
)
axios.post("/index_login.php",
{name:"mewow",age=18},
{headers:{'Content-Type':'application/json'}}
)
axios({
url:请求地址,
method:"post",
data:请求参数,
headers:{请求头信息}
}).then().catch()
post请求的几种写法
<template>
<div>
<input v-model="message" @keyup.enter="sendMessage">
<button @click="sendMessage">Send</button>
<ul>
<li v-for="msg in messages">{{ msg }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
message: '',
messages: [],
socket: null
}
},
created() {
this.socket = new WebSocket('ws://localhost:3000')
this.socket.addEventListener('message', this.handleMessage)
},
beforeDestroy() {
this.socket.close()
},
methods: {
sendMessage() {
this.socket.send(this.message)
this.message = ''
},
handleMessage(event) {
this.messages.push(event.data)
}
}
}
</script>
Axios其他设置
全局挂载
每次使用axios都要再页面引入过于麻烦,所以可以在main.js中进行全局挂载
improt axios from 'axios'
默认配置
//默认请求域名
axios.defaults.baseURL = "/"
//post请求默认请求头
axios.defaults.headers.post['Content-Type'] ='application/x-www-form-urlencoded';
//默认请求超时
axios.defaults.timeout = 5000;
//挂载
const app = createApp(App);
app.config.globalProperties.$http = axios;
app.use(store).use(router).mount('#app')
//$http自定义名称 建议$http
四、通过代理解决跨域问题
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer:{
proxy:{
// .php 代理标识符(当请求地址包含.php 字符启用代理)
".php":{
// 本地服务器向 target服务器请求数据
target:"https://www.520mg.com/",
// 允许跨域
changeOrigin:true,
}
}
}
})
总结
axios可以使数据请求更简单方便,学习使用axios优化自己的项目。
更多推荐
已为社区贡献2条内容
所有评论(0)