在前后端分离开发的时候,经常会遇到后端自己能调通接口,使用postman等测试工具访问也没有问题,但是在页面请求的时候会出现跨域访问问题:
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:18080' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
解决方法:
第一步,添加CorsFilter类,实现Filter接口,代码如下:
public class CorsFilter implements Filter { @Override public void destroy() { } @Override public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException { HttpServletResponse response = (HttpServletResponse) res; response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader("Access-Control-Allow-Methods", "POST"); response.setHeader("Access-Control-Max-Age", "3600"); response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, x-access-token"); chain.doFilter(req, res); } @Override public void init(FilterConfig filterConfig) throws ServletException { } }第二步,在web.xml文件中添加如下配置:
<filter> <filter-name>cors</filter-name> <filter-class>com.wwg.endoscope.filter.CorsFilter</filter-class> </filter> <filter-mapping> <filter-name>cors</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>filter-class标签内容改为自己相应的类。
项目重启,跨域问题解决。