AJAX跨域完整解说

2019年8月24日 196次阅读 来源: Java3y

AJAX跨域完全解说

本日在慕课网上进修了AJAX跨域完全解说：https://www.imooc.com/learn/947

我在网络AJAX口试题的时刻实在就已有过AJAX跨域的题目的了，当时刻知道了为何会存在跨域，以及跨域处理的计划有哪些，本日跟着课程的进修，又加深了AJAX跨域的明白，以此记录下来。

为何会发作发作跨域题目？

上面的图也很清楚了，因为浏览器为了平安(同源)，自身就限定了。

  • 当我们发送XMLHttpRequest要求的时刻，假如要求的是别的域(主机域名、端口)差别时，那末就会发作跨域题目(客户端没法猎取服务端返回的数据)

值得注重的是：跨域的题目是发作在XMLHttpRequest要求的，也就是说，不是XMLHttpRequest要求是不会有跨域题目的

  • 举个很简朴的例子：在编写网页的时刻，<img = src = www.xxxx.xxxx/ >，URL不是本域的照样可以平常猎取该图片的

处理跨域题目的思绪

明显地，跨域的题目是因为浏览器限定的，是XMLHttpRequest才会发作的，那末我们可以以这个思绪去找找处理思绪：

《AJAX跨域完整解说》

关于浏览器的题目，可以运用相干的参数举行启动浏览器，是可以处理跨域的题目，然则通用性是极低的，相识即可。

JSONP处理跨域

JSONP是JSON运用的一种补充体式格局，不是官方的协定。JSONP是一种处理跨域题目的一种协定

JSONP这类处理计划实在如今已很罕用了(庞杂一点，须要修正背景代码)，但我们可以恰当相识一下。

运用步骤

在后端增添一个控制器，继续AbstractJsonpResponseBodyAdvice类，完全代码以下：


@ControllerAdvice
public class JsonpAdvice extends AbstractJsonpResponseBodyAdvice {

    public JsonpAdvice() {
        // TODO Auto-generated constructor stub
        super("callback2");
    }
}

前端ajax要求：



// 服务器返回的效果
    var result;

    $.ajax({
        url: base +"/get1",
        dataType: "jsonp",
        jsonp: "callback2",

        //是不是须要缓存，假如这里没有设置缓存，那末要求的URL还会有一个参数
        cache:true,
        success: function(json){
            result = json;
        }
    });

注重的是，前端AJAX的jsonp: "callback2",要和我们的Controllersuper("callback2");是一致的，不然是不会有用的。

JSONP道理是动态建立script来举行要求的:

《AJAX跨域完整解说》

JSONP的弊病：

  • 要对服务器的代码举行修改
  • 只支撑GET要领(道理是动态建立script来举行要求的)
  • 发送的不是XMLHttpRequest要求(XMLHttpRequest要求有许多好用的特征)

参考资料：

CORS处理跨域题目

CORS处理跨域题目(也就是我们服务端被挪用方处理跨域的思绪）

关于CORS是怎样明白的，我就直接摘抄一下：https://segmentfault.com/a/1190000012469713#articleHeader8的了。

《AJAX跨域完整解说》

在Java中，我们写下面这个过滤器，就可以完全处理跨域的题目了：



package com.imooc;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.tomcat.util.buf.StringUtils;

public class CrosFilter implements Filter {

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        // TODO Auto-generated method stub

    }

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {
        // TODO Auto-generated method stub

        HttpServletResponse res = (HttpServletResponse) response;
        
        HttpServletRequest req = (HttpServletRequest) request;
        
        
        //带cookie的时刻，origin必需是全婚配，不能运用*
        String origin = req.getHeader("Origin");
        if (!org.springframework.util.StringUtils.isEmpty(origin)) {
            res.addHeader("Access-Control-Allow-Origin", origin);
        }
        res.addHeader("Access-Control-Allow-Methods", "*");
        
        // 支撑一切自定义头和预检敕令(非简朴要求会有预检敕令)
        String headers = req.getHeader("Access-Control-Request-Headers");
        if (!org.springframework.util.StringUtils.isEmpty(headers)) {
            res.addHeader("Access-Control-Allow-Headers", headers);            
        }
        
        res.addHeader("Access-Control-Max-Age", "3600");
        // enable cookie
        res.addHeader("Access-Control-Allow-Credentials", "true");
        chain.doFilter(request, response);
    }

    @Override
    public void destroy() {
        // TODO Auto-generated method stub

    }

}

上面提到了非简朴要求，那什么黑白简朴要求呢，可以看下面的图：

《AJAX跨域完整解说》

非简朴要求会发出一个预检敕令的(固然了，我们上面的Filter已处理预检敕令的题目了):

《AJAX跨域完整解说》

Spring框架处理

假如运用的是Spring框架的话，那就只须要一个注解就可以处理跨域的题目了：@CrossOrigin

HTTP服务器层

我们在的商用开辟中，平常要求的历程是如许的：浏览器->HTTP服务器(Nginx,Apache)->应用服务器(Tomcat,Weblogic)

上面编写的Filter、Spring框架都是在应用服务器上处理的，我们也是可以经由过程HTTP服务器(Nginx,Apache)来举行处理跨域题目的！

《AJAX跨域完整解说》

Nginx我用过，Apache我却是还没用过，下面就简朴记录了Nginx和Apache是怎样设置的：

Nginx设置：
《AJAX跨域完整解说》

Apache设置：

《AJAX跨域完整解说》

代办处理跨域题目

在之前的图我们已看到了，处理跨域的题目可以在“挪用方”中来举行处理。

“挪用方”处理跨域的题目是这个思绪的：让发送出去的要求代办成是本域的

举个例子：

www.zhongfucheng.top是挪用方

www.zhongfucheng.site是被挪用方

它俩是差别域的，但我们可以在nginx或Apache上举行设置代办：将被挪用方www.zhongfucheng.site映照成别的途径

比方，像下面的图，将8080端口的映照成了ajaxServer，当挪用方接见ajaxServer途径时，如许的要领在外部看起来就不像是跨域了，像是接见当地（8081端口），但现实接见别的域（8080端口）

《AJAX跨域完整解说》

总结

令我以为最简朴的是经由过程Spring的注解就可以处理跨域的题目了，JSONP的体式格局已是很罕用的了，因为存在肯定的弊病，但相识一下也不妨，毕竟能够口试的时刻会问到。当没有用任何框架的时刻，写Filter也不贫苦，也只是设置了一下HTTP头信息罢了。假如运用Nginx、Apache时，也可以用代办或许设置HTTP头信息都可以处理。看完以后，有无以为跨域题目就水到渠成了。

假如文章有错的处所迎接斧正，人人相互交换。习气在微信看技术文章的同砚，想要猎取更多的Java资本的同砚，可以
关注微信民众号:Java3y

    原文作者：Java3y
    原文地址: https://segmentfault.com/a/1190000013473001
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞