如何解決跨域問題（一）
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 的解決方法;