前後端分離開發時候遇到的跨域訪問問題

在前後端分離開發的時候，經常會遇到後端自己能調通接口，使用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標籤內容改爲自己相應的類。 

項目重啓，跨域問題解決。