前后端分离开发时候遇到的跨域访问问题

在前后端分离开发的时候，经常会遇到后端自己能调通接口，使用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标签内容改为自己相应的类。 

项目重启，跨域问题解决。