前后端分离cors解决跨域问题
程序员文章站
2022-07-10 17:39:01
...
1.当前端调用后台接口时,提示如下错误,如下图:
2.解决方案。
第一步:在后台增加一个java类,如下:
package com.manage.filter;
import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class CorsFilter implements Filter {
@SuppressWarnings("unused")
private static String allowOrigin;
private static String allowMethods;
private static String allowCredentials;
private static String allowHeaders;
@SuppressWarnings("unused")
private static String exposeHeaders;
@Override
public void destroy() {
}
/**
* Access-Control-Allow-Origin:允许访问的客户端域名,例如:http://web.xxx.com,若为*,则表示从任意域都能访问,即不做任何限制。
* Access-Control-Allow-Methods:允许访问的方法名,多个方法名用逗号分割,例如:GET,POST,PUT,DELETE,OPTIONS。
* Access-Control-Allow-Credentials:是否允许请求带有验证信息,若要获取客户端域下的cookie时,需要将其设置为true。
* Access-Control-Allow-Headers:允许服务端访问的客户端请求头,多个请求头用逗号分割,例如:Content-Type。
* Access-Control-Expose-Headers:允许客户端访问的服务端响应头,多个响应头用逗号分割。
*/
/**
* !!!!examples
* response.setHeader("Access-Control-Expose-Headers", exposeHeaders);
* filterChain.doFilter(servletRequest, servletResponse);
* response.setHeader("Access-Control-Allow-Origin", "*");
* response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
* response.setHeader("Access-Control-Allow-Headers", "x-requested-with,Authorization,Content-Type");
* response.setHeader("Access-Control-Allow-Credentials", "true");
* */
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)
throws IOException, ServletException {
HttpServletRequest request = (HttpServletRequest) servletRequest;
HttpServletResponse response = (HttpServletResponse) servletResponse;
String origin = request.getHeader("Origin");
response.setHeader("Access-Control-Allow-Origin",origin);
response.setHeader("Access-Control-Allow-Methods", allowMethods);
response.setHeader("Access-Control-Allow-Credentials", allowCredentials);
response.setHeader("Access-Control-Allow-Headers", allowHeaders);
response.setHeader("Access-Control-Max-Age", "3600");
if("OPTIONS".equals(request.getMethod())){
return;
}
filterChain.doFilter(servletRequest, servletResponse);
}
@Override
public void init(FilterConfig filterConfig) throws ServletException {
allowOrigin = filterConfig.getInitParameter("allowOrigin");
allowMethods = filterConfig.getInitParameter("allowMethods");
allowCredentials = filterConfig.getInitParameter("allowCredentials");
allowHeaders = filterConfig.getInitParameter("allowHeaders");
exposeHeaders = filterConfig.getInitParameter("exposeHeaders");
}
}
第二步,在web.xml里增加如下代码:
<!-- CORS过滤器 start -->
<filter>
<filter-name>cors</filter-name>
<filter-class>com.manage.filter.CorsFilter</filter-class>
<init-param>
<param-name>allowOrigin</param-name>
<param-value>*</param-value>
</init-param>
<init-param>
<param-name>allowMethods</param-name>
<param-value>GET,POST,PUT,DELETE,OPTIONS</param-value>
</init-param>
<init-param>
<param-name>allowCredentials</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>allowHeaders</param-name>
<param-value>Content-Type,x-access-token,x-requested-with</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>cors</filter-name>
<url-pattern>*</url-pattern>
</filter-mapping>
<!-- CORS过滤器 end -->
3.如此前端就可以正常访问后台接口了。
下一篇: jwt原理与实现
推荐阅读
-
解决vue+springboot前后端分离项目,前端跨域访问sessionID不一致导致的session为null问题
-
DRF跨域后端解决之django-cors-headers的使用
-
详解VueJs前后端分离跨域问题
-
springboot解决前后端分离时的跨域问题
-
vue中axios访问Java后端跨域问题解决
-
ajax跨域问题解决方案(jsonp,cors)
-
前后端分离djangorestframework——解决跨域请求
-
vue+springboot前后端分离实现单点登录跨域问题解决方法
-
基于SpringBoot解决CORS跨域的问题(@CrossOrigin)
-
vue2 前后端分离项目ajax跨域session问题解决方法