zoukankan      html  css  js  c++  java
  • jsonp解决跨域问题

    jsonp跨域解决方案原理介绍:

    正常情况下由于同源策略,前端js中A网站无法请求B网站数据,而html的script元素开放策略,A网站可以利用script元素从B网站获取可执行的js语句。在这种前提条件下,如果在A网站js中定义一个方法function funcCallback(data){},并且在B网站后台返回这个funCallback(data),那么A网站就可以通过加载script元素请求B网站,然后再通过funcCallback方法获取来自B网站的数据。

     例子: A.html

     1 <html> 
     2 <head>
     3 <scrtip type="text/javascript" src="B网站"></script>
     4 <script type="text/javascript">
     5     var funCallback = function(data){
     6         console.log(data);
     7     }
     8 </script>
     9 </head>
    10 <body></body>
    11 </html>

    B网站后台,如java:

    1 public void doGet(HttpServletRequest request,   HttpServletResponse response) throws ServletException, IOException {
    2     response.getWriter().write("funCallback('hello');");
    3 }
    从上面的例子中,可以使得A网站获取B网站的数据hello,注意后台输出的一定要是对应的js语句。

    下面我们来说说,如何使用jsonp规范交互请求。

    我们可以在A网站通过ajax去请求B网站的数据,一般数据以json格式传递。可以看一个例子。

    A网站:

     1 <html> 
     2 <head>
     3 <scrtip type="text/javascript" src="jquery.js"></script>
     4 <script type="text/javascript">
     5     document.ready({
     6        $.ajax({
     7           type: "get",
     8           url: "B网站",
     9           dataType: "jsonp",
    10           jsonp: "jsonpcallback",
    11           jsonpCallack: "success_jsonpCallback",
    12           success: function(data){
    13              console.log(data);
    14           }
    15        });
    16     });
    17 </script>
    18 </head>
    19 <body></body>
    20 </html>

    B网站后台,如java:

    1 public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    2     String jsonpcallback = request.getParameter("jsonpcallback");
    3     response.getWriter().write(jsonpcallback + "{name: "hello"};");
    4 }

     最后几个jsonp使用的注意点:

    • 只能发送get请求
    • 只能异步请求
    • url前缀记得加上http://
  • 相关阅读:
    axios
    es6
    $route监听路由变化
    容易挂
    自定义全局组件/插件
    eslintrc.js
    dev-server.js
    webpack-dev-server.js
    怎么消除间隔间的空白字符
    es6语法
  • 原文地址:https://www.cnblogs.com/chenhao1990/p/4627576.html
Copyright © 2011-2022 走看看