spring boot 前后端分离跨域
程序员文章站
2022-06-13 16:03:52
...
1、前端报错
- Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. The response had HTTP status code 403.
- Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:8080' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
Access-Control-Allow-Origin设置为* 那么Access-Control-Allow-Credentials需要设置为false,可后端设置,也可以在前端把axios里的
withCredentials: false, // //是否支持cookie跨域 ,这一条设置为false就行了
对于附带身份凭证的请求,服务器不得设置 Access-Control-Allow-Origin 的值为*。这是因为请求的首部中携带了 Cookie 信息,如果 Access-Control-Allow-Origin 的值为*,请求将会失败。而将 Access-Control-Allow-Origin 的值设置为 http:xxx.com,则请求将成功执行
- Request header field token is not allowed by Access-Control-Allow-Headers in preflight response.
token 未加到Access-Control-Allow-Headers中
2、后端代码
@Component
@WebFilter(urlPatterns = { "/*" }, filterName = "headerFilter")//这里的“/*” 表示的是需要拦截的请求路径
public class CorsFilter implements Filter {
private static final Logger log = LoggerFactory.getLogger(CorsFilter.class);
@Override
public void init(FilterConfig filterConfig) throws ServletException {
log.info("跨域过滤器启动");
}
@Override
public void doFilter(ServletRequest request, ServletResponse servletResponse, FilterChain chain) throws IOException, ServletException {
log.info("跨域过滤器工作");
HttpServletResponse response = (HttpServletResponse) servletResponse;
//解决跨域访问报错
response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization,token,Content-Length,Content-MD5,Expect,Host");
response.setHeader("Access-Control-Allow-Origin", "*");//CredentialsCredentials为true此处需具体域名
response.setHeader("Access-Control-Allow-Credentials", "false");//此处设置为false ccess-Control-Allow-Origin才能设置为*
response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, DELETE");
//设置过期时间
//response.setHeader("Access-Control-Max-Age", "3600");
// 编码
//response.setCharacterEncoding("UTF-8");
chain.doFilter(request, servletResponse);
}
@Override
public void destroy() {
log.info("跨域过滤器销毁");
}
}
@Configuration
public class CorsConfig extends WebMvcConfigurerAdapter {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowCredentials(true)
.allowedMethods("GET", "POST", "DELETE", "PUT")
.maxAge(3600);
}
}
上一篇: Spring Boot swagger之前后端分离
下一篇: 富士施乐激光打印机常见故障排除技巧
推荐阅读
-
spring boot+vue 的前后端分离与合并方案实例详解
-
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
-
Java Spring boot 2.0 跨域问题的解决
-
Spring boot 和Vue开发中CORS跨域问题解决
-
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
-
Java Spring boot 2.0 跨域问题的解决
-
Spring Boot + Vue 前后端分离开发之前端网络请求封装与配置
-
Spring Boot实现跨域访问实现代码
-
Spring boot 总结之跨域处理cors的方法
-
Spring boot 和Vue开发中CORS跨域问题解决