Nginx如何實現跨域存取？ Nginx跨域存取的實現

這篇文章要跟大家介紹的內容是關於Nginx如何實現跨域存取？ Nginx跨域訪問的實現，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

一、什麼是跨域

跨域是指從一個網域的網頁去請求另一個網域的資源。例如從 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

• nbsp;html>
  
      
          <meta>
          <title>Ajax跨站访问b</title>
      
      
          <h1>Ajax跨站访问b - </h1>
      
      <script></script>
      <script>
      $(function(){
          $.ajax({
              url: "http://www.a.com/a.txt",
              type: "GET",
              success: function (data) {
                  $(&#39;h1&#39;).append(data);
              },
              error: function (data) {
                  $(&#39;h1&#39;).append(&#39;请求失败！&#39;);
              }
          });
      })
      </script>
  

/vagrant/c/index.html

• nbsp;html>
  
      
          <meta>
          <title>Ajax跨站访问c</title>
      
      
          <h1>Ajax跨站访问c - </h1>
      
      <script></script>
      <script>
      $(function(){
          $.ajax({
              url: "http://www.a.com/a.txt",
              type: "GET",
              success: function (data) {
                  $(&#39;h1&#39;).append(data);
              },
              error: function (data) {
                  $(&#39;h1&#39;).append(&#39;请求失败！&#39;);
              }
          });
      })
      </script>
  

# 4. 設定客戶端的hosts檔案（使用真是網域的可以忽略）

windows:

C:\Windows\System32\drivers\etc\hosts

#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.

相關文章推薦：

Nginx作為靜態資源web服務來控制瀏覽器快取以及實作防盜鏈

Nginx作為靜態資源web服務並進行靜態資源壓縮

#

以上是Nginx如何實現跨域存取？ Nginx跨域存取的實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！