参考资料: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 );
}
});
这种结果即跨域失败!