5-1-vue3框架-调用后端接口，axios使用，解决跨域问题

什么是 axios？

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

一，安装

使用 npm:

$ npm install axios

二、配置axios，添加拦截器

在src目录下新建一个request文件夹，在里面新建index.ts（或者.js）文件，编辑代码如下：

import axios from 'axios'
// 创建一个 axios 实例
const service = axios.create({
	baseURL: '/api', // 所有的请求地址前缀部分
	timeout: 60000, // 请求超时时间毫秒
	withCredentials: true, // 异步请求携带cookie
	headers: {
		// 设置后端需要的传参类型
		'Content-Type': 'application/json',
		'token': 'your token',
		'X-Requested-With': 'XMLHttpRequest',
	},
})

// 添加请求拦截器
service.interceptors.request.use(
	function (config) {
		// 在发送请求之前做些什么
		return config
	},
	function (error) {
		// 对请求错误做些什么
		console.log(error)
		return Promise.reject(error)
	}
)

// 添加响应拦截器
service.interceptors.response.use(
	function (response) {
		console.log(response)
		// 2xx 范围内的状态码都会触发该函数。
		// 对响应数据做点什么
		// dataAxios 是 axios 返回数据中的 data
		const dataAxios = response.data
		// 这个状态码是和后端约定的
		const code = dataAxios.reset
		return dataAxios
	},
	function (error) {
		// 超出 2xx 范围的状态码都会触发该函数。
		// 对响应错误做点什么
		console.log(error)
		return Promise.reject(error)
	}
)
export default service

三，使用axios发送请求

在src目录下新建一个apis文件夹，这里面放入今后所有的请求文件，例如新建一个请求用户信息的接口user.ts，代码如下：

import service from './request.js'

export function fetchList(query) {
 return service({
   url: '/user/list',
   method: 'get',
   params: query
 })
}

export function updateArticle(data) {
 return service({
   url: '/user/update',
   method: 'post',
   data
 })
}

四，在具体业务页面里使用这个请求，

比如是App.vue这个页面

<template>
    <h1>Hello App!</h1>
</template>
<script>
    import {fetchList, updateArticle} from './user'

    export default {
        methods: {
            getUserInfo() {
                const param = {
                    userID: '10001',
                    userName: 'Mike',
                }
                fetchList(param).then((res) => {
                    console.log(res)
                })
            },
            updateUserInfo() {
                const data = {
                    userID: '10001',
                    userName: 'Mike',
                }
                updateArticle(data).then((res) => {
                    console.log(res)
                })
            },
        },
        mounted() {
            // console.log('######')
            this.getUserInfo()
            this.updateUserInfo()
        },
    }
</script>

五，解决跨域问题

跨域问题，不同ip，不同端口，不同域名，都会有跨域问题，

跨域处理，配置vite跨域代理

第一步在：vite.config.js

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server:{
    proxy:{
      '/api':{
        target:'http://127.0.0.1:5000',
        changeOrigin:true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    },
  }

})

第二步，在request.js（具体内容就是上面贴出来的）

使用vite跨域代理之后需要修改刚刚我们配置的axios的域名
使用/api替代域名完成跨域

import axios from 'axios'
// 创建一个 axios 实例
const service = axios.create({
   baseURL: '/api', // 所有的请求地址前缀部分
   timeout: 60000, // 请求超时时间毫秒
   withCredentials: true, // 异步请求携带cookie
   headers: {
   	// 设置后端需要的传参类型
   	'Content-Type': 'application/json',
   	'token': 'your token',
   	'X-Requested-With': 'XMLHttpRequest',
   },
})
....
export default service

后端代码

我使用Python+flask进行了后端的接口模拟

from flask import Flask

app = Flask(__name__)


@app.route("/")
def hello_world():
    return "<p>Hello, World!</p>"


@app.route("/user/list")
def user_list():
    return "<p>/user/list</p>"


@app.route("/user/update", methods=["GET", "POST"])
def user_update():
    return "<p>/user/update</p>"


if __name__ == '__main__':
    app.run()