发布时间:2024-11-10 18:01
目录
为什么会出现跨域问题?
浏览器的同源策略
首先给出浏览器“同源策略”的一种经典定义,同源策略限制了来自不同源(相对于当前页面而言)的document或script,对当前document的某些属性进行读取或是设置,举例来说,A网站(www.aaa.com)上有某个脚本,在B网站(www.bbb.com)未曾加载该脚本时,该脚本不能读取或是修改B网站的DOM节点数据。
解决办法
代码演示
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/, ""),
}
}
}
})
运行结果
代码演示
vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
//通过代理实现跨域
proxy: {
'/path':{
//替换的服务器地址
target: 'https://localhost/prod-api',
//开启代理 允许跨域
changeOrigin: true,
//设置重写的路径
pathRewrite:{
'^/path':''
}
}
}
}
})
运行结果
Fetch API 提供了一个获取资源的接口(包括跨域请求)。任何使用过 XMLHttpRequest 的人都能轻松上手,而且新的 API 提供了更强大和灵活的功能集。
优点:
1. 语法简洁,更加语义化
2. 基于标准 Promise 实现,支持 async/await
3. 同构方便,更加底层,提供的API丰富(request, response, body , headers)4. 脱离了XHR,是ES规范里新的实现方式复制代码
缺点:
1. fetch只对网络请求报错,对400,500都当做成功的请求,服务器返回 400,500 错误码时并不会 reject。
2. fetch默认不会带cookie,需要添加配置项: credentials: 'include'。
3. fetch不支持abort,不支持超时控制,造成了流量的浪费。
4. fetch没有办法原生监测请求的进度,而XHR可以
后端接口展示
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>
运行效果
后端接口展示
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 是一个基于 promise 网络请求库,作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js
http
模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。
axios优点:
- 支持node端和浏览器端
- 支持 Promise
- 丰富的配置项
使用 npm:
$ npm install axios
查看是否安装成功
后端接口演示
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>
运行结果
后端接口演示
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>
运行结果
request index.ts
import axios from "axios";
//创建axios实例
const service=axios.create({
//url开头
baseURL:"path",
timeout: 5000,
//请求头配置
headers:{
"Content-Type": "application/json; charset=utf-8"
}
})
//请求拦截
service.interceptors.request.use((config)=>{
//请求头放token
config.headers=config.headers || {}
if(localStorage.getItem('token')){
config.headers.Authorization=localStorage.getItem('token') || ""
}
return config;
})
//响应拦截
service.interceptors.response.use((res)=>{
const code:number=res.data.code
// 如果响应code不为200拦截掉
if(code!=200){
return Promise.reject(res.data)
}
return res.data;
},(err)=>{
// 打印错误请求
console.log(err);
})
export default service
request api.ts
import service from ".";
//登入接口
interface LoginData{
userTelephone:string,
userPassword:string
}
export function login(data:LoginData){
return service({
url:"/user/userLoginByPassword",
method: "post",
data
})
}
LoginView.vue 部分使用代码 想看=>完整版(登入功能实现)
//调用登入接口
login(data.ruleForm).then((res) => {
console.log(res)
localStorage.setItem("token", res.data.token);
router.push("/");
});