1、什麼是跨域請求
由于浏覽器同源政策，凡是發送請求url的協定、域名、端口三者之間任意一個與目前頁面位址不同即為跨域；
簡單的來說，就是你的一個項目，需要取拿另外一個伺服器上的資料，因為他們不是同源的，就會發生跨域請求。
同源的了解：例如：http://127.0.0.1:8080
http表示的協定
127.0.0.1 表示域名
8080就是端口号
常見的協定可以看圖
Ajax的跨域請求（jsonp和cors）
2、跨域請求的現象
現在我在eclipse中建立了一個動态web項目，然後寫了一個servlet
public class MyCros extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
System.out.println("doGet------------------");
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("doPost------------------");
resp.setCharacterEncoding("UTF-8");
resp.setContentType("text/html;charset=UTF-8");
resp.getWriter().write("伺服器資料正常");
}
}
然後再用HBuilder或者其他工具建立一個工程（保證不是同源就行），寫一個html或者jsp，利用Ajax請求servlet，就會發生如下錯誤，這就是跨域請求
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input id="a1" />
</body>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
$.ajax({
type:"POST",
url:"Http://localhost:8080/demo/jsonp",
dataType:"text",
success:function(result){
console.log(result);
}
})
})
</script>
</html>
跨域請求的錯誤
2、常用的解決跨域請求的簡單的兩種方法
（1）、jsonp的方式
需要被通路的servlet代碼
public class MyJsionp extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("UTF-8");
resp.setCharacterEncoding("UTF-8");
resp.setContentType("text/html;charset=utf-8");
String callback = req.getParameter("callback");//jquery預設生成的回調函數就叫callback
HashMap<String, String> hashmap = new HashMap<String,String>();
hashmap.put("data", "資料正常得到");
String json = JSON.toJSONString(hashmap);
String tr = callback+"("+json+")";
resp.getWriter().write(tr);
}
}
Ajax的請求代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input id="a1" />
</body>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
$.ajax({
type:"GET",
url:"Http://localhost:8080/demo/jsonp",
dataType:"jsonp", /*這裡必須标明傳回的資料類型是jsonp的格式 */
success:function(result){
console.log(result);
}
})
})
</script>
</html>
運作結果
注意：jsonp的方式隻可以用get的通路方式，即使把Ajax中的通路方式修改為post，浏覽器也會以get的方式進行通路。（不相信的可以去試一下，在浏覽器中檢視通路的方式就知道了）
（2）、cors方式
需要通路的被servlet代碼
public class MyCros extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setCharacterEncoding("UTF-8");
resp.setContentType("text/html;charset=UTF-8");
resp.getWriter().write("伺服器資料正常");
//允許http://127.0.0.1:8848通路
resp.addHeader("Access-Control-Allow-Origin", "http://127.0.0.1:8848");
//如果resp.addHeader("Access-Control-Allow-Origin", "*");//這裡的 * 号表示允許所有的位址進行通路
//如果是post請求的話，上面的加上了不好用的話，就加上下面的兩句代碼
// resp.addHeader("Access-Control-Allow-Method", "Post");
// resp.addHeader("Access-Control-Max-Age", "1000");
}
}
Ajax的請求代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input id="a1" />
</body>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
$.ajax({
type:"POST",
url:"Http://localhost:8080/demo/hello",
dataType:"text",
success:function(result){
console.log(result);
}
})
})
</script>
</html>
注意：
cors的方式支援get和post請求，如果是get請求的話，隻需要在servlet中添加這句代碼就行
//第二個參數的*号表示的是允許通路的url
resp.addHeader("Access-Control-Allow-Origin", "*");
如果是post方式請求的話，有點浏覽器直接上面一句代碼就行了，但是有的不行，如果不行的話，在上面一句代碼的基礎上，還需要添加下面的兩句代碼
//如果是post請求的話，上面的加上了不好用的話，就加上下面的兩句代碼
resp.addHeader("Access-Control-Allow-Method", "Post");
resp.addHeader("Access-Control-Max-Age", "1000");
Cors是W3C的标準，跨域請求的解決方式還有很多，這裡簡單的介紹兩種，不正确的地方希望指正，謝謝