跨域实战解决方案

跨域原因产生：在当前域名请求网站中，默认不允许通过ajax请求发送其他域名。

解决方案

使用后台response添加header
后台response添加header，response.setHeader("Access-Control-Allow-Origin", "*"); 支持所有网站
使用JSONP
前端代码:
$.ajax({
            type : "POST",
            async : false,
            url : "http://a.a.com/a/FromUserServlet?userName=张三",
            dataType : "jsonp",//数据类型为jsonp  
            jsonp : "jsonpCallback",//服务端用于接收callback调用的function名的参数  
            success : function(data) {
                alert(data.result);
            },
            error : function() {
                alert('fail');
            }
        });

jquery 中jsonp的实现原理

　在同源策略下，在某个服务器下的页面是无法获取到该服务器以外的数据的，即一般的ajax是不能进行跨域请求的。但 img、iframe 、script等标签是个例外，这些标签可以通过src属性请求到其他服务器上的数据。利用 script标签的开放策略，我们可以实现跨域请求数据，当然这需要服务器端的配合。 Jquery中ajax 的核心是通过 XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加 <script>标签来调用服务器提供的 js脚本。
　　当我们正常地请求一个JSON数据的时候，服务端返回的是一串 JSON类型的数据，而我们使用 JSONP模式来请求数据的时候服务端返回的是一段可执行的 JavaScript代码。因为jsonp 跨域的原理就是用的动态加载 script的src ，所以我们只能把参数通过 url的方式传递,所以jsonp的 type类型只能是get ！
示例：
$.ajax({
    url: 'http://192.168.1.114/yii/demos/test.php', //不同的域
    type: 'GET', // jsonp模式只有GET 是合法的
    data: {
        'action': 'aaron'
    },
    dataType: 'jsonp', // 数据类型
    jsonp: 'backfunc', // 指定回调函数名，与服务器端接收的一致，并回传回来
})
其实jquery 内部会转化成
http://192.168.1.114/yii/demos/test.php?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron
然后动态加载
<script type="text/javascript"src="http://192.168.1.114/yii/demos/test.php?backfunc= jQuery2030038573939353227615_1402643146875&action=aaron"></script>
然后后端就会执行backfunc(传递参数 )，把数据通过实参的形式发送出去。
　　使用JSONP 模式来请求数据的整个流程：客户端发送一个请求，规定一个可执行的函数名（这里就是 jQuery做了封装的处理，自动帮你生成回调函数并把数据取出来供success属性方法来调用,而不是传递的一个回调句柄），服务器端接受了这个 backfunc函数名，然后把数据通过实参的形式发送出去
 
（在jquery 源码中， jsonp的实现方式是动态添加<script>标签来调用服务器提供的 js脚本。jquery 会在window对象中加载一个全局的函数，当 <script>代码插入时函数执行，执行完毕后就 <script>会被移除。同时jquery还对非跨域的请求进行了优化，如果这个请求是在同一个域名下那么他就会像正常的 Ajax请求一样工作。）



后端代码:
@WebServlet("/FromUserServlet")
public class FromUserServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setCharacterEncoding("UTF-8");
        // resp.setHeader("Access-Control-Allow-Origin", "*");
         String userName = req.getParameter("userName");
         String userAge = req.getParameter("userAge");
         System.out.println(userName + "----" + userAge+"---"+req.getMethod());
        // JSONObject JSONObject1 = new JSONObject();
        // JSONObject1.put("success", "添加成功!");
        // resp.getWriter().write("callbackparam(" + JSONObject1.toJSONString()
        // + ")");

        try {
            resp.setContentType("text/plain");
            resp.setHeader("Pragma", "No-cache");
            resp.setHeader("Cache-Control", "no-cache");
            resp.setDateHeader("Expires", 0);
            PrintWriter out = resp.getWriter();
            JSONObject resultJSON = new JSONObject(); // 根据需要拼装json
            resultJSON.put("result", "content");
            String jsonpCallback = req.getParameter("jsonpCallback");// 客户端请求参数
            out.println(jsonpCallback + "(" + resultJSON.toJSONString() + ")");// 返回jsonp格式数据
            out.flush();
            out.close();
        } catch (Exception e) {
            // TODO: handle exception
        }
    }
}


JSONP的优缺点:
JSONP只支持get请求不支持psot请求
后台Http请求转发
  使用HttpClinet转发进行转发
使用接口网关
使用nginx转发。
使用SpringCloud网关

 

使用后台response添加header

后台response添加header，response.setHeader("Access-Control-Allow-Origin", "*"); 支持所有网站

使用JSONP

前端代码:

$.ajax({

            type : "POST",

            async : false,

            url : "http://a.a.com/a/FromUserServlet?userName=张三",

            dataType : "jsonp",//数据类型为jsonp 

            jsonp : "jsonpCallback",//服务端用于接收callback调用的function名的参数 

            success : function(data) {

                alert(data.result);

            },

            error : function() {

                alert('fail');

            }

        });

 

jquery 中jsonp的实现原理

 

　在同源策略下，在某个服务器下的页面是无法获取到该服务器以外的数据的，即一般的ajax是不能进行跨域请求的。但 img、iframe 、script等标签是个例外，这些标签可以通过src属性请求到其他服务器上的数据。利用 script标签的开放策略，我们可以实现跨域请求数据，当然这需要服务器端的配合。 Jquery中ajax 的核心是通过 XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加 <script>标签来调用服务器提供的 js脚本。

　　当我们正常地请求一个JSON数据的时候，服务端返回的是一串 JSON类型的数据，而我们使用 JSONP模式来请求数据的时候服务端返回的是一段可执行的 JavaScript代码。因为jsonp 跨域的原理就是用的动态加载 script的src ，所以我们只能把参数通过 url的方式传递,所以jsonp的 type类型只能是get ！

示例：

$.ajax({

    url: 'http://192.168.1.114/yii/demos/test.php', //不同的域

    type: 'GET', // jsonp模式只有GET 是合法的

    data: {

        'action': 'aaron'

    },

    dataType: 'jsonp', // 数据类型

    jsonp: 'backfunc', // 指定回调函数名，与服务器端接收的一致，并回传回来

})

其实jquery 内部会转化成

http://192.168.1.114/yii/demos/test.php?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron

然后动态加载

<script type="text/javascript"src="http://192.168.1.114/yii/demos/test.php?backfunc= jQuery2030038573939353227615_1402643146875&action=aaron"></script>

然后后端就会执行backfunc(传递参数 )，把数据通过实参的形式发送出去。

　　使用JSONP 模式来请求数据的整个流程：客户端发送一个请求，规定一个可执行的函数名（这里就是 jQuery做了封装的处理，自动帮你生成回调函数并把数据取出来供success属性方法来调用,而不是传递的一个回调句柄），服务器端接受了这个 backfunc函数名，然后把数据通过实参的形式发送出去

 

（在jquery 源码中， jsonp的实现方式是动态添加<script>标签来调用服务器提供的 js脚本。jquery 会在window对象中加载一个全局的函数，当 <script>代码插入时函数执行，执行完毕后就 <script>会被移除。同时jquery还对非跨域的请求进行了优化，如果这个请求是在同一个域名下那么他就会像正常的 Ajax请求一样工作。）

 

 

 

后端代码:

@WebServlet("/FromUserServlet")

publicclass FromUserServlet extends HttpServlet {

 

    @Override

    protectedvoid doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        doPost(req, resp);

    }

 

    @Override

    protectedvoid doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        resp.setCharacterEncoding("UTF-8");

        // resp.setHeader("Access-Control-Allow-Origin", "*");

         String userName = req.getParameter("userName");

         String userAge = req.getParameter("userAge");

         System.out.println(userName + "----" + userAge+"---"+req.getMethod());

        // JSONObject JSONObject1 = new JSONObject();

        // JSONObject1.put("success", "添加成功!");

        // resp.getWriter().write("callbackparam(" + JSONObject1.toJSONString()

        // + ")");

 

        try {

            resp.setContentType("text/plain");

            resp.setHeader("Pragma", "No-cache");

            resp.setHeader("Cache-Control", "no-cache");

            resp.setDateHeader("Expires", 0);

            PrintWriter out = resp.getWriter();

            JSONObject resultJSON = new JSONObject(); // 根据需要拼装json

            resultJSON.put("result", "content");

            String jsonpCallback = req.getParameter("jsonpCallback");// 客户端请求参数

            out.println(jsonpCallback + "(" + resultJSON.toJSONString() + ")");// 返回jsonp格式数据

            out.flush();

            out.close();

        } catch (Exception e) {

            // TODO: handle exception

        }

    }

}

 

 

JSONP的优缺点:

JSONP只支持get请求不支持psot请求

后台Http请求转发

  使用HttpClinet转发进行转发

使用接口网关

使用nginx转发。

使用SpringCloud网关