vue使用axios解决跨域get和post请求

本文主要是介绍vue使用axios解决跨域get和post请求，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

step1: 跨域插件

插件地址：https://github.com/deraw/vue-cli-plugin-proxy

yarn add @deraw/vue-cli-plugin-proxy

C:\Users\Windows\WebstormProjects\untitled\vue.config.js

 // vue.config.js
module.exports = {devServer: {port: 8081,proxy: {// '/other/path' don't be included in 'pluginOptions.proxy.context'.'/other/path': {target: 'http://192.168.0.188:5000',changeOrigin: true},},},pluginOptions: {proxy: {enabled: true,context: ['/api', '/oauth2', '/login', '/auth/conf'],options: {target: 'http://192.168.0.188:5000',secure: false,headers: {host: 'localhost:8081',},},},},
};

step2: 安装axios 网络请求框架

插件地址：https://www.npmjs.com/package/vue-axios?activeTab=readme

yarn add --save axios vue-axios

step3:package.json版本号

  "dependencies": {"@deraw/vue-cli-plugin-proxy": "^2.2.7","axios": "^1.6.8","core-js": "^3.8.3","vue": "^3.2.13","vue-axios": "^3.5.2"},

step4:引用axios

import App from './App.vue'
import * as Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'const app = Vue.createApp(App)
app.use(VueAxios, axios)
app.mount('#app')

step5: 主界面，调用axios 使用get post请求

<template><span><a @click="register()">去注册</a></span><span><a @click="postData()">去登录</a></span>
</template><script>export default {name: 'HelloWorld',props: {msg: String},methods: {register() {this.axios.get('/api/queryall').then((response) => {console.log(response)})},async postData() {const data = {id: 4,lastName: 'ffsssaaaaassf',email: '5207694232@qq.com'};this.axios.post('/api/adds', data).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});},}
}
</script>