目录
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:{
//通过代理实现跨域 http://localhost:20219
proxy:{
'/api':{
//替换的服务器地址
target: 'http://localhost:20219',
//开启代理 允许跨域
changeOrigin: true,
//设置重写的路径
rewrite: (path) => path.replace(/^\/api/, ""),
}
}
}
})
运行结果
fetch
代码演示
Post请求
后端接口展示
user.vue
<template>
<h2>用户页面</h2>
<button @click="userLogin">登入</button>
</template>
<script>
export default {
data() {
return {
user: {
userTelephone: 12244332222,
userPassword: "123456"
},
};
},
//fetch 原生js 是http数据请求的一种方式
//fetch 返回promise对象
methods: {
userLogin() {
fetch("api/user/userLoginByPassword", {
method: "post",
body: JSON.stringify({
userPassword: this.user.userPassword,
userTelephone: this.user.userTelephone
}),
headers: {
"Content-Type": "application/json",
},
})
.then((res) => {
console.log(res);
//json()将响应body 解析json的promise
// console.log(res.json());
return res.json();
})
.then((res) => {
console.log(res);
});
},
},
};
</script>运行效果
Get请求
后端接口展示
user.vue
<template>
<h2>用户页面</h2>
</template>
<script>
export default {
//fetch 原生js 是http数据请求的一种方式
//fetch 返回promise对象
created() {
//获取验证图片
fetch("/api/user/toCreateVerifyImg", {
method: "get"
})
.then((res) => {
console.log(res);
//json()将响应body 解析json的promise
// console.log(res.json());
return res.json();
})
.then((res) => {
console.log(res);
});
}
};
</script>运行结果
Axios
官网
安装
使用 npm:
$ npm install axios查看是否安装成功
代码演示
Post请求
后端接口演示
User.vue
<template>
<h2>用户页面</h2>
<button @click="userLogin">登入</button>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
user: {
userTelephone: 12244332222,
userPassword: "123456",
},
};
},
methods: {
//登入
userLogin() {
axios
.post("api/user/userLoginByPassword", {
userPassword: this.user.userPassword,
userTelephone: this.user.userTelephone,
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
},
},
};
</script>运行结果
Get请求
后端接口演示
User.vue
<template>
<h2>用户页面</h2>
</template>
<script>
import axios from "axios";
export default {
created() {
//获取验证图片
axios
.get("api/user/toCreateVerifyImg")
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
// 总是会执行
console.log("总是会执行");
});
},
};
</script>运行结果
