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

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

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頭

Syntax: add_header name html' target='_blank'>value [always];Default: —Context: http, server, location, if in location

# 配置網站www.a.comserver { 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.comserver { server_name www.b.com; root /vagrant/b;# 配置網站www.c.comserver { server_name www.c.com; root /vagrant/c;}

vim /vagrant/a/a.txt

Hello,I m a!

/vagrant/b/index.html

 !DOCTYPE html  html lang= en  head  meta charset= utf-8  title Ajax跨站訪問b /title  /head  body  h1 Ajax跨站訪問b - /h1  /body  script src= http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js /script  script  $(function(){ $.ajax({ url: http://www.a.com/a.txt , type: GET , success: function (data) { $( h1 ).append(data); error: function (data) { $( h1 ).append( 請求失??！  /script  /html 

/vagrant/c/index.html

 !DOCTYPE html  html lang= en  head  meta charset= utf-8  title Ajax跨站訪問c /title  /head  body  h1 Ajax跨站訪問c - /h1  /body  script src= http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js /script  script  $(function(){ $.ajax({ url: http://www.a.com/a.txt , type: GET , success: function (data) { $( h1 ).append(data); error: function (data) { $( h1 ).append( 請求失??！  /script  /html 

windows: C:/Windows/System32/drivers/etc/hosts
linux: /etc/hosts

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

192.168.33.88 www.a.com192.168.33.88 www.b.com192.168.33.88 www.c.com

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教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。