Nginx- 实现跨域访问
一、什么是跨域
跨域：由于瀏覽器的同源策略，即屬于不同域的頁面之間不能相互訪問各自的頁面內容。詳細見下表：
注：同源策略，單說來就是同協議，同域名，同端口
?
?
| http://www.a.com/a.js http://www.a.com/b.js | 同一域名下 | 允許 |
| http://www.a.com/lab/a.js http://www.a.com/script/b.js | 同一域名下不同文件夾 | 允許 |
| http://www.a.com:8000/a.js http://www.a.com/b.js | 同一域名，不同端口 | 不允許 |
| http://www.a.com/a.js https://www.a.com/b.js | 同一域名，不同協議 | 不允許 |
| http://www.a.com/a.js http://70.32.92.74/b.js | 域名和域名對應ip | 不允許 |
| http://www.a.com/a.js http://script.a.com/b.js | 主域相同，子域不同 | 不允許 |
| http://www.a.com/a.js http://a.com/b.js | 同一域名，不同二級域名（同上） | 不允許（cookie這種情況下也不允許訪問） |
| http://www.cnblogs.com/a.js http://www.a.com/b.js | 不同域名 | 不允許 |
?
?
二、為什么要跨域
?
出于安全考慮（比如csrf攻擊），瀏覽器一般會禁止進行跨域訪問，但是因為有時有相應需求，需要允許跨域訪問，這時，我們就需要將跨域訪問限制打開。
比如：Ajax請求另一個域名獲取數據
當前網站www.kk.com 請求另一網站接口 www.oo.com/getuser/uid/220305， 獲取user數據
?
?
?
三、跨域的實現
?
1、前后端結合（JsonP）
雖然jsonp也可以實現跨域，但是因為jsonp不支持post請求，應用場景受到很大限制，所以這里不對jsonp作介紹。
了解jsonp實現跨域可以點擊這里：
https://blog.csdn.net/u014607184/article/details/52027879/
?
2、純后端方式一（CORS方式）
CORS 是w3c標準的方式，通過在web服務器端設置：響應頭Access-Cntrol-Alow-Origin 來指定哪些域可以訪問本域的數據，ie8&9(XDomainRequest)，10+,chrom4，firefox3.5,safair4，opera12支持這種方式。
服務器代理，同源策略只存在瀏覽器端，通過服務器轉發請求可以達到跨域請求的目的，劣勢：增加服務器的負擔，且訪問速度慢。
這種方式直接在響應php文件中設置header即可
?
?
示例代碼：
<?php header('Access-Control-Allow-Origin:http://www.kk.com'); $data = array('name'=>'m_nanle_xiaobudiu','age'=>26,'sex'=>'man' ); echo json_encode($data);?
當我們需要允許多個域名跨域訪問時，可以這樣做
<?php $origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : '';$allow_origin = array('http://www.kk.com','http://www.gg.com' );if(in_array($origin, $allow_origin)){header('Access-Control-Allow-Origin:'.$origin); } $data = array('name'=>'m_nanle_xiaobudiu','age'=>26,'sex'=>'man' ); echo json_encode($data);?
?
3、純后端方式二（Nginx代理方式）【建議這種方式】
直接在nginx服務器上設置模塊參數。
—— 代碼實現：
?html部分（www.kk.com）：
<html lang="en"> <head><meta charset="UTF-8" /><title>測試ajax和跨域訪問</title><script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> </head> <script type="text/javascript">$(document).ready(function(){$.ajax({type: "post",url: "http://www.oo.com/1.php",success: function(data) {alert(data);},error: function() {alert("fail!!!,請刷新再試!");}});}); </script> <body> <h1>測試跨域訪問</h1> </body> </html>?
php部分（www.oo.com）：
<?php $data = array('name'=>'m_nanle_xiaobudiu','age'=>26,'sex'=>'man' ); echo json_encode($data);?
Nginx配置文件部分、
server {listen 80;server_name www.oo.com ;root "G:\oo";add_header Access-Control-Allow-Origin http://www.kk.com;add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;location / {index index.html index.htm index.php;#autoindex on;}location ~ \.php(.*)$ {fastcgi_pass 127.0.0.1:9000;fastcgi_index index.php;fastcgi_split_path_info ^((?U).+\.php)(/?.+)$;fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;fastcgi_param PATH_INFO $fastcgi_path_info;fastcgi_param PATH_TRANSLATED $document_root$fastcgi_path_info;include fastcgi_params;}}注：實際項目中，可能我們提供的接口需要允許不止一個域名訪問，這時，我們需要配置允許多個域名訪問，這時，我們可以用map
示例：
map $http_origin $corsHost {default 0;"~http://www.kk.com" http://www.kk.com;"~http://www.gg.com" http://www.gg.com; } server {listen 80;server_name www.oo.com ;root "G:\oo";add_header Access-Control-Allow-Origin $corsHost;add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;location / {index index.html index.htm index.php;#autoindex on;}location ~ \.php(.*)$ {fastcgi_pass 127.0.0.1:9000;fastcgi_index index.php;fastcgi_split_path_info ^((?U).+\.php)(/?.+)$;fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;fastcgi_param PATH_INFO $fastcgi_path_info;fastcgi_param PATH_TRANSLATED $document_root$fastcgi_path_info;include fastcgi_params;} }?
?
總結
以上是生活随笔為你收集整理的Nginx- 实现跨域访问的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Nginx -静态资源Web服务
- 下一篇： Nginx 网站定义自己的错误页面