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

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, // 允许跨域

            pathRewrite: {
                '^/api': ''
            }
        }
    }
}
1
2
3
4
5
6

})
在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
1

}, 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属性值改为后台地址就可以了。
文章转自：SpringBoot+Vue2项目解决前后端跨域方案_Java-答学网

作者：答学网，转载请注明原文链接：http://www.dxzl8.com/