axios的基本使用和vue脚手架自带的跨域问题解决
1. axios
1.1 导入axios
npm i axios
1.2 创建serve1.js
serve1.js
const express = require('express')
const app = express()
app.use((request,response,next)=>{
console.log('有人请求服务器1了');
console.log('请求来自于',request.get('Host'));
console.log('请求的地址',request.url);
next()
})
app.get('/students',(request,response)=>{
const students = [
{id:'001',name:'tom',age:18},
{id:'002',name:'jerry',age:19},
{id:'003',name:'tony',age:120},
]
response.send(students)
})
//监听5000端口
app.listen(5000,(err)=>{
if(!err) console.log('服务器1启动成功了,请求学生信息地址为：http://localhost:5000/students');
})
App.vue
<script>
import axios from 'axios'
export default {
name: 'App',
components: {
},
mounted() {
//发送请求，注意，请求的端口是8080，而我们服务器监听的是5000端口
axios.get('http://localhost:8080/students').then( response => {
console.log(response.data)
}).catch( error => {
console.log(error.message)
})
}
}
</script>
1.3 执行node命令，打开服务监听
node serve1
1.4 启动vue项目
npm run serve
结果：
2. vue脚手架自带的跨域问题解决
关于跨域问题的具体说明和其他解决方案见：什么是跨域？跨域解决方法-CSDN博客
想通过vue脚手架自带的跨域解决，需要在 vue.config.js 中配置 devServer
2.1 基本配置
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
devServer: {
//配置serve1.js对应监听的端口
proxy: 'http://localhost:5000'
}
})
此时，需要重新运行vue项目
npm run serve
就能在控制台上看到请求的结果了，结果：
2.2 详细配置
详细配置可以精准控制自己本次请求需不需要代理转发
vue.config.js
//方式二：可以精准控制，看看自己本次请求需不需要代理
devServer: {
proxy: {
//要代理需要加 api 前缀(http://localhost:XXX/api/xxxx)，配合pathRewrite属性使用
'/api': {
target: 'http://localhost:5000',
pathRewrite: {'^/api':''}, //匹配端口号后面以/api开头的信息，将其变为空
changeOrigin: true, //控制请求头中的host，服务器收到的是改变后的host信息
}
}
}
App.vue
<script>
import axios from 'axios'
export default {
name: 'App',
components: {
},
mounted() {
//发送请求，注意，请求的端口是8080，而我们服务器监听的是5000端口
//注意，请求的url是 http://localhost:8080/api/students
//配合vue.config.js中配置的pathReWrite可以将/api去掉
//如果我们加了/api就是需要代理转发，没加则不需要
axios.get('http://localhost:8080/api/students').then( response => {
console.log(response.data)
}).catch( error => {
console.log(error.message)
})
}
}
</script>
结果：
