这里记录一下,我在写一个自己设计的项目时遇到的几个问题!!!
1、Session获取为null
需求:session保存验证码,在session中验证验证码是否正确
解释:
前端跨域访问后端接口, 在浏览器的安全策略下默认是不携带cookie的, 所以每次请求都开启了一次新的会话。
解决:
前端VueCli中main.js设置:
axios.defaults.withCredentials = true; //这行代码表示在发送 Axios 请求时,将会自动发送和接收本站设置的跨域凭证(即发送和接收包含身份凭证的请求)。
后端配置拦截器,拦截所有请求:
public class MyInterceptor implements HandlerInterceptor {@Overridepublic 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部分:
axios.defaults.baseURL = '/app';
这里注意,这里代理只支持本地开发时使用。在将整个项目放到服务器后,需要在web服务器配置后端服务的代理。否则前端页面的请求不可用!!