Access to XMLHttpRequest at '接口' from origin'xx.xx.cn' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
index-29339a0.js:890
文章目录
现在大部门,企业开发都选择前后分离,解耦合,让技术人员更专注于自己所在的领域,但在前端请求后端接口时很容易出现跨域问题.
一.跨域怎么产生
出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port
二.解决方式
2.1 设置document.domain解决无法读取非同源网页的 Cookie问题
2.2跨文档通信 API:window.postMessage()
2.3JSONP (只支持get)
2.4CORS(跨域资源分享)
三.java服务端的解决方式附带源码
@WebFilter(filterName = "AccessControlAllowOriginFilter",
urlPatterns = "*",
dispatcherTypes = {DispatcherType.REQUEST},
initParams = {@WebInitParam(name = "encoding", value = "utf-8")},
asyncSupported = true )
public class AccessControlAllowOriginFilter implements Filter {
private final static Logger logger = LoggerFactory.getLogger(AccessControlAllowOriginFilter.class);
@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", request.getHeader("Origin"));
logger.info("发生跨域Origin [{}]",request.getHeader("Origin"));
response.setHeader("Access-Control-Allow-Methods", "*");
response.setHeader("Access-Control-Allow-Credentials", "true");
filterChain.doFilter(servletRequest, response);
}
@Override
public void destroy() {
}
}