首先,前后端分离的首要问题就是跨域。
1、先在后端配置跨域
2、先查看一下过滤器的配置。这里我使用的是shiro权限框架。
重点是红框中的内容,在这里我把自定义的过滤器,配置了进去。然后再最后配置拦截 url: /**。
注意:这里的 /** 这句代码一定要放到最后,
3、下面看一下我自定义的过滤器
package com.example.file_upload.fm.filter;
import com.alibaba.fastjson.JSON;
import com.example.file_upload.constant.Constant;
import com.example.file_upload.exception.BusinessException;
import com.example.file_upload.fm.shiro.ShiroUserNamePasswordToken;
import lombok.extern.slf4j.Slf4j;
import org.apache.shiro.authc.AuthenticationException;
import org.apache.shiro.web.filter.AccessControlFilter;
import org.springframework.util.StringUtils;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import java.io.IOException;
import java.io.OutputStream;
import java.nio.charset.StandardCharsets;
import java.util.HashMap;
import java.util.Map;
/**
* 这里的异常,全局异常无法处理,比较高级没有到达 方法,所以需要自己处理 try-catch
*/
@Slf4j
public class ShiroAccessControlFilter extends AccessControlFilter {
/**
* 是否 允许 访问下一层
* true: 允许,交下一个Filter 处理
* false: 交给自己处理,往下执行 onAccessDenied 方法
* @param servletRequest
* @param servletResponse
* @param o
* @return
* @throws Exception
*/
@Override
protected boolean isAccessAllowed(ServletRequest servletRequest, ServletResponse servletResponse, Object o) throws Exception {
return false;
}
/**
* 表示访问拒绝时是否自己处理,
* 如果返回 true 表示自己不处理且 继续拦截器执行,往下执行
* 返回 false 表示自己已经处理了(比如重定向到另一个界面)处理完毕。
*
* @param servletRequest
* @param servletResponse
* @return
* @throws Exception
*/
@Override
protected boolean onAccessDenied(ServletRequest servletRequest, ServletResponse servletResponse) throws Exception {
HttpServletRequest request= (HttpServletRequest) servletRequest;
try {
log.info("接口请求方式{}",request.getMethod());
log.info("接口请求地址{}",request.getRequestURI());
String token=request.getHeader(Constant.TOKEN_SESSION_ID);
log.info("接口请求token{}", token);
if(StringUtils.isEmpty(token)){
throw new BusinessException(4010001,"用户凭证已失效请重新登录认证");
}
ShiroUserNamePasswordToken customUsernamePasswordToken=new ShiroUserNamePasswordToken(token);
getSubject(servletRequest,servletResponse).login(customUsernamePasswordToken);
} catch (BusinessException e) {
customResponse(e.getMessageCode(),e.getMessage(),servletResponse);
return false;
} catch (AuthenticationException e) {
if(e.getCause() instanceof BusinessException){
BusinessException businessException= (BusinessException) e.getCause();
customResponse(businessException.getMessageCode(),businessException.getMessage(),servletResponse);
}else {
customResponse(4000001,"用户认证失败",servletResponse);
}
return false;
}catch (Exception e){
customResponse(5000001,"系统异常",servletResponse);
return false;
}
return true;
}
/**
* 异常处理
* 因为这里的位置是高于业务层的,所以这里的异常只能通过流的形式输出到前端。
* @param code
* @param msg
* @param response
*/
private void customResponse(int code, String msg, ServletResponse response) {
// 自定义异常的类,用户返回给客户端相应的JSON格式的信息
try {
Map<String, Object> result = new HashMap<>();
result.put("code", code);
result.put("msg", msg);
response.setContentType("application/json; charset=utf-8");
response.setCharacterEncoding("UTF-8");
String userJson = JSON.toJSONString(result);
// 写入到 流中,返回到客户端
OutputStream out = response.getOutputStream();
out.write(userJson.getBytes(StandardCharsets.UTF_8));
out.flush();
} catch (IOException e) {
log.error("eror={}", e.getLocalizedMessage());
}
}
}
4、结果:
先看一下当前配置的结果:
在当前配置下, 前端发送一个post请求后,会产生两条请求,一个OPTIONS请求,另一个是POST请求。
OPTIONS请求先进入我们自定义的过滤器中,产生如下响应
后端:
前端控制台:
前端Network:
前端请求详情:
OPTIONS请求
POST请求
可以看到,OPTINOS请求成功进入后端,但是因为OPTIONS请求不会携带自定义请求头,所以该条请求被后端过滤器拦截。导致后端不能获取第二次的真正的POST请求(这次的POST请求是真正携带请求头)。
5、解决办法
我们只需要在第一次产生OPTIONS请求中,直接返回true,告诉浏览器,可以正常访问,然后我们就能正常收到真正的POST请求了。
代码如下:我们只需要在刚才自定义的过滤器中,对OPTIONS请求直接返回为true即可。
修改后的请求结果:可以看到和之前的配置对比,POST请求也进入到我们的过滤器中,token也可以正常拿到了。