003Axios网络请求跨域前端解决方案

创建项目npm create vite@latest

 名字

 选择

 选择

 进行

 这个页面这样写

 这个页面这样写

 删除这两个

 安装npm install axios

 安装npm install querystring

 

 

 

 

 

 

1、在 Vite 的配置文件中，可以通过 proxy 选项来配置代理，使得前端代码与接口请求在同一域下。例如：
//vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
server: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
rewrite: path => path.replace(/^\api/, '')
}
}
}
})

在这个例子中，将所有以 /api 开头的请求代理到 http://localhost:8080，同时需要设置 changeOrigin 为 true，表示更改源地址，这样才能避免跨域问题。

 

 

2、main.js文件内容
import { createApp } from 'vue'
import axios from 'axios'
import App from './App.vue'
const app=createApp(App)
app.provide("axios",axios)
app.mount('#app')

 

3、发异步请求的组件如下:
<script setup>
import { onMounted,reactive,inject} from 'vue';
import querystring from 'querystring'
let axios=inject("axios")
let emp=reactive({
id:0,
name:"",
money:0.0,
address:""
})

//注： http://localhost:5173/ 前端IP:端口号
onMounted(axios.post("http://localhost:5173/api/hello").then(res=>{
emp.id=res.data.id
emp.name=res.data.name
emp.money=res.data.money
emp.address=res.data.address
console.log(res.data)
}))

</script>

 

<template>
<p>welcome to Axios</p>
<ul>
<li>{{ emp.id }}</li>
<li>{{ emp.name }}</li>
<li>{{ emp.money }}</li>
<li>{{ emp.address }}</li>
</ul>
</template>

<style lang="scss" scoped>
</style>