1.什么是跨域
由於瀏覽器的同源策略，用來限制從一個源加載的文檔或腳本與來自另一個源的資源進行交互。那怎樣判斷是否是同源呢？如果協議，端口（如果指定了）和主機對於兩個頁面是相同的，則兩個頁面具有相同的源，也就是同源。也就是說，要同時滿足以下3個條件，才能叫同源：
協議相同
端口相同
主機相同
2.常見跨域情況
網絡協議不同，如http協議訪問https協議 ;
端口不同，如80端口訪問8080端口 ;
域名不同，如www.test1.com訪問www.test2.com ;
子域名不同，如abc.test1.com訪問def.test1.com ;
3.跨域問題實例
這里通過子域名不同方式，設計一個跨域訪問的示例
3.1環境准備
一台服務器（搭建好Nginx環境）;
二級域名2個
test1.xqiangme.top
test2.xqiangme.top
3.2新建2個index.html
文件1, 示例目錄:/home/nginx/static_html/index_test1.html
<html>
<head>
<title>test1 跨域測試</title>
</head>
<body style="padding: 20px;">
<br/>
<script type='text/javascript'>
var xmlhttp = new XMLHttpRequest()
xmlhttp.open("GET", "http://test2.xqiangme.top/index.html", true);
xmlhttp.send();
</script>
<p>hello world ...... test1 子域名index.html </p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
文件2, 示例目錄:/home/nginx/static_html/index_test2.html
<html>
<head>
<title>test2跨域測試</title>
</head>
<script type='text/javascript'>
var xmlhttp = new XMLHttpRequest()
xmlhttp.open("GET", "http://test1.xqiangme.top/index.html", true);
xmlhttp.send();
</script>
<body style="padding: 20px;">
<br/>
<p>hello world ...... test2 子域名index.html </p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
3.3Nginx配置
配置目錄示例：/home/nginx/conf/nginx_test1_and_test2.conf
user root;
events {
worker_connections 1024;
}
http {
charset utf-8;
server {
listen 80;
server_name test1.xqiangme.top;
location /index.html {
alias /home/nginx/static_html/index_test1.html;
}
}
server {
listen 80;
server_name test2.xqiangme.top;
location /index.html {
alias /home/nginx/static_html/index_test2.html;
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
3.4啟動Nginx
# 切換到安裝目錄下
cd /usr/local/nginx/sbin
./nginx -c /home/nginx/conf/nginx_test1_and_test2.conf
1
2
3
4
若環境變量已經配置好，可直接使用./nginx 無需切換到安裝目錄下啟動
3.5訪問測試
test1子域名
test2子域名示例
4.解決跨域問題
一般Nginx解決跨域問題有2種方式，一般用第一種，接下來也是主講第一種。
通過配置 header方式解決跨域 ;
通過反向代理 ;
修改nginx server 配置，添加如下內容
#允許跨域請求的域，* 代表所有
add_header 'Access-Control-Allow-Origin' *;
#允許請求的header
add_header 'Access-Control-Allow-Headers' *;
#允許帶上cookie請求
add_header 'Access-Control-Allow-Credentials' 'true';
#允許請求的方法，比如 GET,POST,PUT,DELETE
add_header 'Access-Control-Allow-Methods' *;
1
2
3
4
5
6
7
8
添加完成以上配置，重啟Nginx就會發現，可以正常訪問了
PS ：若考慮到安全性，也可以指定訪問來源請求的域，示例：
add_header 'Access-Control-Allow-Origin' 'http://test1.xqiangme.top';
1
5.附錄
5.1示例中Nginx完整配置
user root;
events {
worker_connections 1024;
}
http {
charset utf-8;
server {
listen 80;
server_name test1.xqiangme.top;
#允許跨域請求的域，* 代表所有
add_header 'Access-Control-Allow-Origin' *;
#允許帶上cookie請求
add_header 'Access-Control-Allow-Credentials' 'true';
#允許請求的方法，比如 GET/POST/PUT/DELETE
add_header 'Access-Control-Allow-Methods' *;
#允許請求的header
add_header 'Access-Control-Allow-Headers' *;
location /index.html {
alias /home/nginx/static_html/index_test1.html;
}
}
server {
listen 80;
server_name test2.xqiangme.top;
#允許跨域請求的域，* 代表所有
add_header 'Access-Control-Allow-Origin' *;
#允許帶上cookie請求
add_header 'Access-Control-Allow-Credentials' 'true';
#允許請求的方法，比如 GET/POST/PUT/DELETE
add_header 'Access-Control-Allow-Methods' *;
#允許請求的header
add_header 'Access-Control-Allow-Headers' *;
location /index.html {
alias /home/nginx/static_html/index_test2.html;
}
}
}
————————————————
版權聲明：本文為CSDN博主「程序員小強」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_38011415/article/details/107095403