SpringBoot+Vue实际开发中的Axios二次封装和请求跨域详解及解决方案

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;
    }
}