SpringBoot+Vue2项目解决前后端跨域方案

现实工作开发中经常会有跨域的情况，因为公司会有很多项目，也会有很多子域名，各个项目或者网站之间需要相互调用对方的资源，这样就避免不了跨域请求。

那先来说一说什么是跨域吧！
跨域：指的是从一个域名去请求另外一个域名的资源，即跨域请求！
跨域时，浏览器不能执行其他域名网站的脚本，是由浏览器的同源策略造成的，是浏览器施加的安全限制。
跨域严格来说就是只要协议、域名、端口三者有一个不同，就被当作跨域。
同源策略：三者必须完全相同称之为同源。

下面介绍两种解决前后端跨域方案。

一. 前端跨域解决方案

1、vue.config.js配置如下：

const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true,
    devServer: {
    	// 设置前端页面访问端口（选填）
        host: 'localhost',
        port: '80',
        // 跨域配置
        proxy: {
            '/api': {
                target: 'http://localhost:8080',		// 后台地址
                changeOrigin: true,						// 允许跨域
                /*
                * 路径重写
				* 例：开发者工具查看网络请求URL地址是：http://localhost/api/user/pagePlus,
				* 实际访问地址是：http://localhost:8080/user/pagePlus,  因为重写了 /api
				* */
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
})

在vue中使用proxy进行跨域的原理是：将域名发送给本地的服务器（启动vue项目的务,loclahost），再由本地的服务器去请求真正的服务器。

2、在vue中最常用的应该就是axios了，这是一个很强大的处理ajax的库。一般我们会对axios进行封装再使用，怎么安装这里就不啰嗦了。

封装的request.js配置如下：

import axios from 'axios'

const request = axios.create({
    baseURL: '/api',
    timeout: 5000
})

request.interceptors.request.use(config => {
    config.headers['Content-Type'] = 'application/json;charset=utf-8';

    return config
}, error => {
    return Promise.reject(error)
});

request.interceptors.response.use(response => {
    let res = response.data;
    if (response.config.responseType === 'blob') {
        return res
    }
    if (typeof res === 'string') {
        res = res ? JSON.parse(res) : res
    }
    return res;
}, error => {
    console.log('err' + error)
    return Promise.reject(error)
})

export default request

最后在main.js文件中引入request：

import request from "@/utils/request";
Vue.prototype.request = request

over，这就是前端跨域的解决方案了。

再来看一下我们前端请求的代码，是不是很简洁！

this.request.delete("/user/" + id).then(res => {
        if (res.data === true) {
          ......
        } else {
          ......
        }
        this.loadData();
      })

二. 后端跨域解决方案

后端跨域解决方案也很简单啦，具体操作看我这篇博客：
SpringBoot全局跨域配置类

后端设置了跨域配置后，对axios封装的request.js任然是通用的，只需要将baseURL属性值改为后台地址就可以了。