vue 框架处理后端Springboot的跨域请求

分手后的思念是犯贱 2023-05-29 03:06 152阅读 0赞

在使用Vue框架时首选axios进行请求处理，我们可以对vue-axios进行在封装这样可以统一进行请求和相应的处理，自定义响应。跨域请求可以使用vue-jsonp发送jsonp请求，具体怎么操作这里就不介绍了，还可以封装axios的请求头进行处理跨域。跨域的处理需要前端处理，服务器后端也需要进行处理。

axios.js 文件如下：

可以参考这个连接[https://www.kancloud.cn/yunye/axios/234845][https_www.kancloud.cn_yunye_axios_234845]

import axios from 'axios';
    import {MessageBox} from 'element-ui';
    
    var qs = function (obj) {
        var rs = [];
        Object.keys(obj).forEach((key) => {
            if (typeof(obj[key]) !== 'undefined') {
                rs.push(key +'='+encodeURIComponent(obj[key]));
            }
        });
        return rs.join('&');
    };
    
    var Ajax = axios.create({
    });
    // 请求拦截
    Ajax.interceptors.request.use(config => {
        if(config.method == 'get'){
            config.params = {...config.params , ...config.data};
        } else if (config.method == 'jsonp') {
            config.headers = {
                'X-Requested-With': 'XMLHttpRequest',
                'Content-Type': 'application/json; charset=UTF-8',
                'Access-Control-Allow-Origin': '*'
            };
            config.method = 'get';
            config.params = {...config.params , ...config.data};
        } else {
            if (config.data) {
                let data = eval(config.data);
                console.log(data);
                config.data = qs(data);
            }
        }
        return config;
    }, function (error) {
        return Promise.reject(error);
    });
    
    Ajax.interceptors.response.use(function(response) {
        var data = response.data || {};
        if(data.status){ // 响应报错统一处理
            MessageBox.alert(data.message, {
                confirmButtonText: '确定',
                showClose: false
            });
        }
        return data;
    }, function (error) {
        return Promise.reject(error);
    });
    
    Ajax.install = function(Vue) {
        console.log(Vue);
        Vue.prototype.$ajax = Ajax;
    };
    export default Ajax;

这里自定义了jsonp请求方法，进行跨域请求。

在代码中的请求方式是：this.rootApi = http://localhost:8888

this.$ajax({
        url: this.rootApi + '/test',
        method: 'jsonp',
        data: {
            // 需要的参数，
            startDate: date,
            endDate: date
        }
    }).then(json => {
        //请求成功处理.
    }).catch(err => {
        console.log(err);
    });

这里的请求就是get请求方式，

SpringBoot后端的请求方式：对于SpringBoot的跨域处理方式有三种吧，一种是全局指定请求方式进行跨域处理，一种是只当Controller 一类接口进行跨域处理，一种的具体某个方法进行跨域处理。我这里介绍的就是一类接口比较简单的跨域处理，就是在具体提供跨域服务的类上添加一个注解进行处理。如下：

@RestController
    @CrossOrigin(origins = {"http://127.0.0.1:9000", "null"})
    public class CheckDataController {

这里前端页面的ip加端口号是：http://127.0.0.1:9000，也可以是域名，正式环境都是域名的，

后端服务器地址：http://localhost:8888

[https_www.kancloud.cn_yunye_axios_234845]: https://www.kancloud.cn/yunye/axios/234845