由于同源策略(Same origin policy)的影響,瀏覽器一般默認會禁止跨域訪問。
同源既相同的協義(protocol)相同的主機(host)和相同的端口(port)。
**如何使用Nginx來允許跨域訪問?**
做個模擬,先配置下host
> windows: C:\Windows\System32\drivers\etc\hosts
> linux: /etc/hosts
~~~
192.168.33.88 www.a.com
192.168.33.88 www.b.com
192.168.33.88 www.c.com
~~~
Nginx通過添加 Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers 等HTTP頭信息的來實現訪控制。
> "Access-Control-Allow-Origin" 設置允許發起跨域請求的網站
"Access-Control-Allow-Methods" 設置允許發起跨域請求請求的HTTP方法
"Access-Control-Allow-Headers" 設置允許跨域請求包含 Content-Type頭
window下修改nginx.conf配置文件,修改如下:
~~~
# 配置網站www.a.com
server {
server_name www.a.com;
root /vagrant/a;
# 允許 http://www.b.com 使用 GET,POST,DELETE HTTP方法發起跨域請求
add_header Access-Control-Allow-Origin http://www.b.com;
add_header Access-Control-Allow-Method GET,POST,DELETE;
}
# 配置網站www.b.com
server {
server_name www.b.com;
root /vagrant/b;
}
# 配置網站www.c.com
server {
server_name www.c.com;
root /vagrant/c;
}
~~~