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

如何解决跨域问题（一）

1.什么是跨域？

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

2. JSON解决跨域

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

script 标签解决跨域问题

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

​

    
    



    发送请求


// 客户端   端口号:8081


   

 
 //服务器端  端口号：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 的解决方法;