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>

结果：