前后端分离项目问题总结

chao超的搬运文章

发布于 2023-10-15 19:29:13

2270

发布于 2023-10-15 19:29:13

文章被收录于专栏：java,hbase

这里记录一下，我在写一个自己设计的项目时遇到的几个问题！！！

1、Session获取为null

需求：session保存验证码，在session中验证验证码是否正确

解释：

前端跨域访问后端接口, 在浏览器的安全策略下默认是不携带cookie的, 所以每次请求都开启了一次新的会话。

解决：

前端VueCli中main.js设置：

axios.defaults.withCredentials = true; //这行代码表示在发送 Axios 请求时，将会自动发送和接收本站设置的跨域凭证（即发送和接收包含身份凭证的请求）。

后端配置拦截器，拦截所有请求：

public class MyInterceptor implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler){
        response.setHeader("Access-Control-Allow-Origin",request.getHeader("Origin"));//支持跨域请求
        response.setHeader("Access-Control-Allow-Methods", "*");//设置允许的HTTP请求方法。通配符"*"表示允许所有的请求方法
        response.setHeader("Access-Control-Allow-Credentials", "true");//是否支持cookie跨域
        response.setHeader("Access-Control-Allow-Headers", "Authorization,Origin, X-Requested-With, Content-Type, Accept,Access-Token");//设置允许的HTTP请求头。通过设置该响应头，指定允许前端发送的请求头信息
        return true;
    }

2、上传文件过大

需求：上传一张图片和一个执行文件

解释：

利用MultipartFile对象上传文件时，SpringBoot默认会有一个大小限制。

解决：

在application.yml文件中添加配置：

spring: servlet: multipart: max-file-size: -1 #指定允许上传文件的最大大小，-1表示没有限制 max-request-size: -1 #用于设置允许的最大请求体大小，也就是整个HTTP请求的大小限制。它包括请求报头、请求行、请求体等所有的数据

3、前端跨域问题

在npm run server执行vue脚手架项目时，所有请求都是好的。但是webpack打包后，在运行项目去请求，所有请求都失效了，在控制台报错 '跨域问题' 。

解决：

在vue.config.js文件中添加代理配置：

module.exports = {
    devServer: {
        port: 8088,
        proxy:{                //代理配置
            '/app':{           //指匹配以/app开头的路径
                target:'http://localhost:8888',    //代理的目标地址
                changeOrigin:true,    //这里设置true表示在发送请求时，将请求头中的Host字段更改为目标主机的地址
                pathRewrite:{        //重写路径
                    '/app':'/'       //这里将以 /app 开头的路径重写为以 / 开头的路径
                }
            }
        }
    },
    publicPath:'./',
    outputDir:'dist',
    assetsDir:'assets'
}

在main.js中设置axios的基础url部分：