最近工作中遇到了跨域問題，其實這個名詞我一直都能聽別人提起，但是確實沒有仔細研究過，因此我會通過幾篇系列文章，記錄下我學習的過程。今天的這篇文章主要從以下2個方面來介紹：
- 爲什麼會有跨域？
- 單機上重現跨域問題
爲什麼會有跨域
跨域是指a頁面想獲取b頁面資源，如果a、b頁面的協議、域名、端口、子域名不同，或是a頁面爲ip地址，b頁面爲域名地址，所進行的訪問行動都是跨域的，而瀏覽器爲了安全問題一般都限制了跨域訪問，也就是不允許跨域請求資源。這裏需要注意是form的請求是不會有跨域問題的，只有ajax的請求纔會有跨域問題。
那瀏覽器爲什麼要限制ajax跨域，而form的不限制呢？
跨域本身解決的是防止CSRF攻擊，比如說有兩個網站 A和B。你是A的用戶，你在A網站可以刪除用戶，加入你登錄到另一個危險的網站B, 網站B 有一個按鈕，這個按鈕被按下時會發送一個刪除請求到A網站，而你還渾然不知。因此瀏覽器處於這個考慮，不允許跨域名的調用。那其實還有沒有解釋另一個問題：爲什麼form的不限制呢？因爲原頁面用 form 提交到另一個域名之後，原頁面的腳本無法獲取新頁面中的內容。所以瀏覽器認爲這是安全的。而 AJAX 是可以讀取響應內容的，因此瀏覽器不能允許你這樣做。如果你細心的話你會發現，其實請求已經發送出去了，服務器確實給出了響應，但是瀏覽器把它攔截了。
單機上重現跨域問題
主機環境是mac，所以我先用brew install nginx下載一個nginx, 你也可以使用其他的web服務器，我這裏就從最簡單的入手。
- 更新本地hosts文件 vim /etc/hosts，加入2個解析：
127.0.0.1 backend.com
127.0.0.1 frontend.com
- 在本地某一個目錄/tmp/crossdomain新建一個index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(){
$.ajax({
type:'post',
url:'http://backend.com:9001/setname',
data:$("#myform").serialize(),
cache:false,
dataType:'json',
success:function(data){
alert("請求成功");
}
});
});
});
</script>
</head>
<body>
<form action="" id="myform">
用戶名<input type="text" name="name"/>
</form>
<a href="#" style="text-decoration: none;">使用ajax提交表單數據</a>
</body>
</html>- 新建一個spring boot項目，在其中一個controller中加入/setname的請求處理，啓動的端口號是9001：
@RequestMapping("/setname")
public String test(@RequestParam(name = "name") String name) {
return name;
}- 修改nginx配置， vim /usr/local/etc/nginx/nginx.conf, 將其中的一個server修改爲：
listen 80;
server_name frontend.com;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root /tmp/crossdomain;
index index.html index.htm;
}
- 啓動nginx和spring boot, 訪問http://frontend.com， 輸入一個隨便的內容，點擊提交鏈接, 打開chrome的控制檯你會發現紅色的錯誤出現：No 'Access-Control-Allow-Origin' header is present on the requested resource， 這個就是典型的跨域問題
總結
這篇文字介紹了跨域問題的來源以及如何在本地重現跨域問題，方便我們實地操演，瞭解內部原理，後面的文章會繼續介紹如何解決跨域問題。
歡迎關注我的個人的博客www.zhijianliu.cn, 虛心求教，有錯誤還請指正輕拍，謝謝
版權聲明：本文出自志健的原創文章，未經博主允許不得轉載