這篇文章要跟大家介紹的內容是關於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 檔案
##/ 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) {
$('h1').append(data);
},
error: function (data) {
$('h1').append('请求失败！');
}
});
})
</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) {
$('h1').append(data);
},
error: function (data) {
$('h1').append('请求失败！');
}
});
})
</script>
登入後複製
# 4. 設定客戶端的hosts檔案（使用真是網域的可以忽略）
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
登入後複製
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-
開啟瀏覽器的開發者模式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中文網其他相關文章！
