跨域是指從一個(gè)域名的網(wǎng)頁去請求另一個(gè)域名的資源。比如從 www.a.com 頁面去請求 www.b.com 的資源。

瀏覽器一般默認(rèn)會禁止跨域訪問。因?yàn)椴话踩菀壮霈F(xiàn) CSRF（跨站請求偽造）攻擊。

Nginx通過添加 Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers 等HTTP頭信息的方式控制瀏覽器緩存。

Access-Control-Allow-Origin 設(shè)置允許發(fā)起跨域請求的網(wǎng)站
Access-Control-Allow-Methods 設(shè)置允許發(fā)起跨域請求請求的HTTP方法
Access-Control-Allow-Headers 設(shè)置允許跨域請求包含 Content-Type頭

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

# 配置網(wǎng)站www.a.comserver { server_name www.a.com; root /vagrant/a; # 允許 http://www.b.com 使用 GET,POST,DELETE HTTP方法發(fā)起跨域請求 add_header Access-Control-Allow-Origin http://www.b.com; add_header Access-Control-Allow-Method GET,POST,DELETE;# 配置網(wǎng)站www.b.comserver { server_name www.b.com; root /vagrant/b;# 配置網(wǎng)站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

添加如下內(nèi)容，并保存（192.168.33.88為筆者虛擬機(jī)的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 - 請求失敗！

打開瀏覽器的開發(fā)者模式Console，還可以發(fā)現(xiàn) http://www.c.com/index.html 的頁面出現(xiàn)報(bào)錯(cuò):

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.

相關(guān)文章推薦：

Nginx作為靜態(tài)資源web服務(wù)來控制瀏覽器緩存以及實(shí)現(xiàn)防盜鏈

Nginx作為靜態(tài)資源web服務(wù)并進(jìn)行靜態(tài)資源壓縮

以上就是Nginx如何實(shí)現(xiàn)跨域訪問？Nginx跨域訪問的實(shí)現(xiàn)的詳細(xì)內(nèi)容，PHP教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。