springboot+Vue项目使用axios实现跨域(CROS)

一、项目背景

本文中主要使用springboot项目做后端，Vue做前端，前后端使用axios实现数据交互，前后端分别部署情况：

项目	部署域名
springboot后台项目	http://localhost:8081
vue前端项目	http://localhost:8080

由于前后端部署在两个不同端口下就涉及到了跨域概念。

二、跨域资源共享 CORS 详解

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。

它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制，这里引用了一篇文章详细的讲解了CROS的内部机制，非常详细，请参阅:

跨域资源共享 CORS 详解

三、axios跨域实现

3.1 安装qs模块

qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。
QS官方文档

安装方式

	npm i qs -save

在使用的模块中引入

	import qs from "qs";

主要方法示例：

• qs.parse(string, [options]) 将请求参数字符串转成对象

	var obj = qs.parse('a=c');
	//输出 {
    a: 'c' }
	
	qs.parse('foo[bar]=baz');
	//输出
	//foo: {
   
    //    bar: 'baz'
    //}
	qs.parse('foo[bar][baz]=foobarbaz');
	//输出
	//foo: {
   
    //    bar: {
   
    //        baz: 'foobarbaz'
    //    }
    //}
	qs.parse('a=b;c=d', {
    delimiter: ';' });
	//输出 {
    a: 'b', c: 'd' }
	//等等还有好多使用方法请参照官方文档

• qs.stringify(object, [options])将对象转成查询字符串

	qs.stringify({
    a: 'b' })
	//输出 a=b
	
	qs.stringify({
    a: {
    b: 'c' } })
	//输出 a%5Bb%5D=c
	
	qs.stringify({
    a: {
    b: 'c' } }, {
    encode: false })
	//输出 a[b]=c
	
	qs.stringify({
    a: ['b', 'c', 'd'] });
	//输出 'a[0]=b&a[1]=c&a[2]=d'

	qs.stringify({
    a: ['b', 'c', 'd'] }, {
    indices: false });
	//输出 'a=b&a=c&a=d'

3.2 axios使用

如果axios不会安装，请参阅上一篇文章在新建项目中引用axios章节

1. 首先在项目根目录下简历一个util文件夹用来存放项目要是用到的工具类
2. 在util文件夹中新建httpconfig.js文件，用来配置axios全局设置，具体设置代码如下:

import axios from "axios";

// 覆写库的正式环境的路径,开发环境及测试环境设置请求到/api
//process.env.NODE_ENV === 'production' 生产环境
//process.env.NODE_ENV === 'development' 开发环境
//process.env.NODE_ENV === 'test' 测试环境
axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? "http://localhost:8081" :"/api";
// 现在，在超时前，所有请求都会等待 30 秒
axios.defaults.timeout = 30000;
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
   
	//在此处设置请求发送前的各种配置信息，具体congfig内容参见axios文档http://www.axios-js.com/zh-cn/docs/
    // 在发送请求前配置token请求头
    //config.headers['token'] = "tokenaxcs234";
    //开启跨域携带cookie
    config.withCredentials=true;
    return config;
}, function (error) {
   
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
   
    // 对响应数据做点什么
    //var token = response.headers.token;
    //console.log(token)
    return response;
},