如何解决跨域问题（一）
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 的解决方法;