美文网首页
解决跨域请求

解决跨域请求

作者: HJJ_3c00 | 来源:发表于2018-06-15 14:26 被阅读0次

使用后台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的核心则是动态添加 标签来调用服务器提供的 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

然后动态加载

  type="text/javascript"src="http://192.168.1.114/yii/demos/test.php?backfunc=

  jQuery2030038573939353227615_1402643146875&action=aaron">

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

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

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

后端代码:

@WebServlet("/FromUserServlet")

public classFromUserServletextends 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",

  "*");

         StringuserName = req.getParameter("userName");

         StringuserAge = 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);

            PrintWriterout = resp.getWriter();

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

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

            StringjsonpCallback = 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转发。

相关文章

  • 跨域

    ??JSONP只能解决GET请求跨域,不能解决POST请求跨域问题,XHR2可以解决GET,POST方式的请求跨域...

  • node跨域头

    Nodejs解决跨域请求 例

  • 跨域

    什么是跨域? 为什么会发生ajax跨域?浏览器限制跨域【发出的请求不是本域】XHR请求【json】 解决思路:1:...

  • AJAX出现两次请求 options和get|post

    跨域请求 允许跨域请求 preflighted request预请求(options) 跨域请求 XMLHttpR...

  • ajax跨域请求

    ajax跨域请求(jsonp) 利用JSONP解决AJAX跨域问题的原理与jQuery解决方案JSONP jQue...

  • 开发环境跨域和生产环境跨域

    开发环境跨域 前后端分离,IP地址不同,请求数据必然导致跨域问题;解决方案:proxy设置 生产环境跨域 解决方案...

  • axios发送俩次请求的原因

    其实跨域分为简单跨域请求和复杂跨域请求 简单跨域请求是不会发送options请求的 复杂跨域请求会发送一个预检请求...

  • koa2解决跨域请求和options请求

    跨域 使用koa-cors解决跨域问题 添加一个中间件 解决options请求 由于做了跨域,所以前端用post请...

  • 【跨域】解决办法:利用 Access-Control-Allow

    【跨域】解决办法:利用 Access-Control-Allow-Origin 传统的跨域请求没有好的解决方案,无...

  • 跨域CORS

    CORS全称是跨域资源共享(Cross-Origin Resource Sharing),用来解决AJAX跨域请求...

网友评论

      本文标题:解决跨域请求

      本文链接:https://www.haomeiwen.com/subject/xtfdeftx.html