隨着越來越多的項目走向了前後端分離，前端服務，需要訪問到不同的後端地址，經常遇到跨域問題。本文主要介紹使用Nginx解決跨域問題。
1.什麼是跨域
由於瀏覽器的同源策略，用來限制從一個源加載的文檔或腳本與來自另一個源的資源進行交互。那怎樣判斷是否是同源呢？如果協議，端口（如果指定了）和主機對於兩個頁面是相同的，則兩個頁面具有相同的源，也就是同源。也就是說，要同時滿足以下3個條件，才能叫同源：
- 協議相同
- 端口相同
- 主機相同
2.常見跨域情況
- 網絡協議不同，如http協議訪問https協議 ;
- 端口不同，如80端口訪問8080端口 ;
- 域名不同，如www.test1.com訪問www.test2.com ;
- 子域名不同，如abc.test1.com訪問def.test1.com ;
3.跨域問題實例
3.1環境準備
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>
文件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>
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;
}
}
}
3.4啓動Nginx
# 切換到安裝目錄下
cd /usr/local/nginx/sbin
./nginx -c /home/nginx/conf/nginx_test1_and_test2.conf
若環境變量已經配置好，可直接使用./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' *;
添加完成以上配置，重啓Nginx就會發現，可以正常訪問了
PS ：若考慮到安全性，也可以指定訪問來源請求的域，示例：
add_header 'Access-Control-Allow-Origin' 'http://test1.xqiangme.top';
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;
}
}
}