SpringBoot+Vue实际开发中的Axios二次封装和请求跨域解决方案
Axios二次封装
什么是Axios
Axios是一个基于promise的网络请求库,可以用于浏览器和node.js
为什么要进行二次封装
在实际开发中,发起的网络请求会有多次,为了api的统一管理,或者在请求过程中对发送的请求和响应拦截,进行二次加工。
import axios from 'axios'
export function request(config) {
const instance = axios.create({
baseURL: 'http://localhost:9090/',
timeout: 5000
})
// axios拦截器
// 请求拦截
instance.interceptors.request.use(config => {
// console.log(config);
// 请求拦截的作用
// 1、比如config中的一些信息不符合服务器的要求
// 2、比如每次发送网络请求时,都希望在界面中显示一个请求图标
// 3、某些网络请求(比如登录(token)),必须携带一些特殊的信息
// 拦截拿到只后,必须返回过去
return config
}, err => {
console.log(err)
})
// 响应拦截
instance.interceptors.response.use(res => {
// console.log(res);
return res.data
}, err => {
console.log(err)
})
// 因为instance是他本身返回的就是一个Promise对象,没必要在对他进行重新包装
return instance(config)
}
项目中使用封装好的Axios
// 在vue中导入封装好的request.js请求包
import { request } from './components/network/request'
request({
url: '/user',
method: 'get',
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
请求跨域问题
什么是跨域
浏览器的同源策略,当发起请求的域与该请求指向的域不同时会产生跨域。凡是发送请求的url的 协议、域名、端口号三者之间任意一者与当前页面地址不同的就会造成跨域。
同源策略只是针对于浏览器端,浏览器检测到请求发起域与指向域不同时,就会堵塞请求结果。跨域请求是可以发出去的,但是请求后的响应response被浏览器堵塞了
解决一:vue中配置前端代理
在vue项目src同级目录下创建vue.config.js文件
module.exports = {
devServer: {
// 本地主机
host: 'localhost',
// 项目运行端口号
port: 8999,
// 配置代理服务器
proxy: {
'/api': {
// 配置要改变的后台地址
target: 'http://localhost:9090',
// true表示实现跨域
changOrigin: true,
// 如果是https需要配置
securs: false,
// 正则表达式以^/api开头使用''替换
pathRewrite: {
'^/api': ''
}
}
}
},
configureWebpack: {
resolve: {
// 配置别名
alias: {
'assets': '@/assets',
'components': '@/components',
'common': '@/common',
'network': '@/network',
'views': '@/views'
}
}
}
}
解决二:服务器端配置CORS
CORS:全称跨域资源共享。2014年CORS作为http协议的扩充部分正式发布,主要定义了客户端和服务端的沟通机制,也就是所谓的协议。
CORS需要浏览器和服务器同时支持,才可以实现跨域请求,目前几乎所有的浏览器都支持CORS,IE则不能低于IE10。CORS的整个过程都由浏览器自动完成,前端无需做任何设置,跟平时发送请求无差异,浏览器一旦发现请求跨域,就会自动添加一些附加的头信息,有时还会多一次附加的请求,但用户不会有感觉。因此,实现CORS的关键在于服务器,只要服务器实现CORS接口,就可以实现跨域通信。
功能概述
跨域资源共享标准新增了一组HTTP首部字段,允许服务器声明哪些源站通过浏览器有权限访问哪些资源。规范要求,对那些可能对服务器数据产生副作用的HTTP请求(特别是GET以外的HTTP请求,或者搭配某些MIME类型的POST请求),浏览器必须使用OPTIONS方法发起一个预检请求,从而获知服务端是否允许该跨源请求。服务器确认允许之后,才发起实际的HTTP请求。在预检请求的返回中,服务器端可以通知客户端,是否需要携带身份凭证(包括Cookies和HTTP认证相关数据)。
代码实现
@Configuration
public class CorsFilterConfig {
/**
* 解决跨域
*
* @return
*/
@Bean
public CorsFilter corsFilter() {
//创建CorsConfiguration对象后添加配置
CorsConfiguration corsConfiguration = new CorsConfiguration();
//设置放行哪些原始域
corsConfiguration.addAllowedOrigin("*");
//放行哪些原始请求头部信息
corsConfiguration.addAllowedHeader("*");
//放行哪些请求方式
corsConfiguration.addAllowedMethod("*");
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
//添加映射路径
source.registerCorsConfiguration("/**", corsConfiguration);
CorsFilter corsFilter = new CorsFilter(source);
return corsFilter;
}
}