Nginx實踐篇（3）- 跨域訪問

twohappy 發布于2019-07-25 14:23 / 1315人閱讀

摘要：瀏覽器一般默認會禁止跨域訪問。因為不安全，容易出現跨站請求偽造攻擊。二控制瀏覽器允許跨域訪問通過添加等頭信息的方式控制瀏覽器緩存。

一、什么是跨域

跨域是指從一個域名的網頁去請求另一個域名的資源。比如從 www.a.com 頁面去請求 www.b.com 的資源。

瀏覽器一般默認會禁止跨域訪問。因為不安全，容易出現 CSRF（跨站請求偽造）攻擊。

二、Nginx控制瀏覽器允許跨域訪問

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頭

ngx_http_headers_module 語法

Syntax:    add_header name value [always];
Default:    —
Context:    http, server, location, if in location

應用實例 1. vim conf.d/cross_site.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;
}

2. nginx -s reload 重新載入nginx配置文件 3. 創建 /vagrant/a/a.txt、/vagrant/b/index.html、/vagrant/c/index.html 文件

vim /vagrant/a/a.txt

Hello,I"m a!

/vagrant/b/index.html



    
        
        Ajax跨站訪問b
    
    
        Ajax跨站訪問b -

/vagrant/c/index.html



    
        
        Ajax跨站訪問c
    
    
        Ajax跨站訪問c -

4. 配置客戶端的hosts文件（使用真是域名的可以忽略）

windows: C:WindowsSystem32driversetchosts
linux: /etc/hosts

添加如下內容，并保存（192.168.33.88為筆者虛擬機的IP，需自行替換為自己的IP）：

192.168.33.88 www.a.com
192.168.33.88 www.b.com
192.168.33.88 www.c.com

5. 瀏覽器分別訪問 http://www.b.com/index.html 和 http://www.c.com/index.html

http://www.b.com/index.html

Ajax跨站訪問b - Hello,I"m a!

http://www.c.com/index.html

Ajax跨站訪問c - 請求失敗！

打開瀏覽器的開發者模式Console，還可以發現 http://www.c.com/index.html 的頁面出現報錯:

Failed to load http://www.a.com/a.txt: The "Access-Control-Allow-Origin" header has a value "http://www.b.com" that is not equal to the supplied origin. Origin "http://www.c.com" is therefore not allowed access.

云服務器 GPU云服務器 nginx服務器跨域跨域訪問申請跨域訪問 jquery跨域訪問

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/40037.html

Nginx實踐篇（3）- 跨域訪問

摘要：瀏覽器一般默認會禁止跨域訪問。因為不安全，容易出現跨站請求偽造攻擊。二控制瀏覽器允許跨域訪問通過添加等頭信息的方式控制瀏覽器緩存。一、什么是跨域跨域是指從一個域名的網頁去請求另一個域名的資源。比如從 www.a.com 頁面去請求 www.b.com 的資源。 showImg(https://segmentfault.com/img/remote/1460000015873212?...

王巖威 2019-07-01 10:26 評論0 收藏0
Nginx實踐篇（3）- 跨域訪問

摘要：瀏覽器一般默認會禁止跨域訪問。因為不安全，容易出現跨站請求偽造攻擊。二控制瀏覽器允許跨域訪問通過添加等頭信息的方式控制瀏覽器緩存。一、什么是跨域跨域是指從一個域名的網頁去請求另一個域名的資源。比如從 www.a.com 頁面去請求 www.b.com 的資源。 showImg(https://segmentfault.com/img/remote/1460000015873212?...

Forelax 2019-05-28 17:11 評論0 收藏0
「跨域」利用node.js實踐前端各種跨域方式（下）

摘要：技術的學習也是如此唯有實踐才能更清楚的明白原理和加深印象，因此本文會利用對前端的各種跨域方式進行實踐，強烈建議一步一步跟著做，相信你肯定會對跨域有更深層次的理解。前言常言道，讀萬卷書，不如行萬里路。技術的學習也是如此,唯有實踐才能更清楚的明白原理和加深印象，因此本文會利用node.js對前端的各種跨域方式進行實踐，強烈建議一步一步跟著做，相信你肯定會對跨域有更深層次的理解。而由于篇...

Jenny_Tong 2019-08-22 18:02 評論0 收藏0
Nginx

摘要：此外，其也能夠提供強大的反向代理功能。是由為俄羅斯訪問量第二的站點開發的，第一個公開版本發布于年月日。 keepalived+nginx 實現高可用雙機熱備 + 負載均衡架構 1 準備4個ubuntu16.04虛擬機（啟用網卡二并使用橋接模式）:A服務器：192.168.0.103 主B服務器：192.168.0.104 主（備）前端工程師學習 Nginx ...

syoya 2019-07-25 14:06 評論0 收藏0