Java 后端解决跨域问题及如何测试跨域是否成功

参考资料：https://blog.csdn.net/qq_35720307/article/details/83616682

问题描述：

        当前端代码和后台代码不在一个服务器的时候；或者在一个服务器上，端口不一样的时候。

        前端请求后台的时候就涉及到跨域的问题，如果是协议和端口造成的跨域问题“前台”是无能为力的。

解决办法：       

        常见解决办法：JSONP、CORS策略、document.domain+iframe的设置、HTML5的postMessage、使用window.name来进行跨域

        应用场景：1.需要兼容IE低版本浏览器采用JSONP。2.需要对服务端资源进行谢操作采用，CORS。其他的后续了解

        这里采用CORSC策略：

步骤一：

 
import org.springframework.stereotype.Component;
 
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
 
/**
 * @Author ： YingZhang
 * @Description:
 * @Date : Create in 10:45 AM 11/1/2018
 */
@Component
@WebFilter(urlPatterns = "/*")
public class JavaCORS implements Filter {
 
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
 
    }
 
    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        HttpServletRequest request = (HttpServletRequest) servletRequest;
 
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods","GET, OPTIONS, HEAD, PUT, POST");
        if (request.getMethod().equals("OPTIONS")) {
            response.setStatus(HttpServletResponse.SC_ACCEPTED);
        }
 
        filterChain.doFilter(servletRequest, servletResponse);
    }
 
    @Override
    public void destroy() {
 
    }
}

步骤二：web.xml文件中引入

<filter>
		<filter-name>cors</filter-name>
		<filter-class>cn.adfadsfasdad.commons.utils.JavaCORS</filter-class>
	</filter>
	<filter-mapping>
		<filter-name>cors</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>

 

步骤三：重启服务器!

 

测试是否跨域成功

var jq = document.createElement('script');
jq.src = "https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);

$.ajax({
  type: "GET",
  url: "你要测试的url",
  success: function(msg){
     alert( "Data Saved: " + msg );
   }
});

这种结果即跨域失败！