首页 > Web开发 > 详细

如何解决跨域问题(JSONP篇)

时间:2020-04-12 17:12:02      阅读:58      评论:0      收藏:0      [点我收藏+]

如何解决跨域问题(一)

1.什么是跨域?

跨域,即域名,端口号,协议等不一样,访问就会产生跨域问题

2. JSON解决跨域

eg1: 在localhost:8081 下访问 localhost:8082/index/demo

script 标签解决跨域问题

  • script image iframe 等标签都可以进行跨域

?

<head>
    <meta charset="UTF-8">
    <title>测试跨域问题</title>
</head>
<body>
<div id="loginForm">
    <button onclick="demoFunc()">发送请求</button>
</div>

// 客户端   端口号:8081
<script src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
	/*这是回传所触发方法*/
    /*回传参数格式:ShowMessage( {"info":"requestSuccess"} )*/
    function ShowMessage(data) {
       console.log(data.info)
    }
	/*目的在于向head中添加script,达到请求目的*/
    function demoFunc() {
        var ele=document.createElement("script");
        ele.type=‘text/javascript‘;
        ele.src="http://localhost:8082/index/demo?callback=ShowMessage";
        $(‘head‘).append(ele)
    }
	/*或者使用*/
    function demoFunc(){
        $(‘head‘).append("<script src=‘http://localhost:8082/index/demo?callback=ShowMessage‘>					<\/script>")  /*注意闭合标签 有‘\’ 目的在于转义 */
    }
</script>
   

 
 //服务器端  端口号:8082
    
 @Controller
 @RequestMapping("/index")
public class IndexController {

    @RequestMapping("/demo")
    @ResponseBody
    public String demo(@RequestParam("callback") String callback){
        String jsonData="{\"info\":\"RequestSuccess\"}";
        String resInfo=callback+"("+jsonData+")";
        return resInfo;
    }
    //回传的参数格式:回传方法名(  回传参数*要求是json格式*  )
}

客户端使用ajax请求

 function demoFunc() {
      $.ajax({
          url:‘http://localhost:8082/index/demo‘,
          type:‘get‘,
          dataType:‘jsonp‘,  //指定服务器返回的数据类型
          jsonp:‘callback‘,  //这里表示请求的参数 默认为callback 即?callback=ShowMessage
          jsonpCallback:‘ShowMessage‘,   //表示回传的方法
          success:function (data) {
              console.log("success")
          }
      })
}

注意:jsonp不支持post方法 所以在表单等一些情况下,是无法使用jsonp的,即下文会说CORS 的解决方法;

如何解决跨域问题(JSONP篇)

原文:https://www.cnblogs.com/chq1024/p/12685779.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!