如何利用PHP 快速解決跨域問題

Posted on by

跨域介紹

瀏覽器擁有同源策略限制確保安全，同源策略會阻止一個域的Javascript腳本和另外一個域的內容進行交互。

當一個請求url的協議、域名（包括多級域名）、端口三者之間任意一個與當前頁面url不同即為跨域。

跨域介紹

  • 1）無法讀取非同源網頁的 Cookie、LocalStorage 和 IndexedDB
  • 2）無法接觸非同源網頁的 DOM 節點
  • 3）無法向非同源地址發送 AJAX 請求

跨域解決方案

1）JSONP（隻支持GET請求）

Javascript：

<script src="http://test.com/data.php?callback=dosomething"></script>
// 向服務器test.com發出請求，該請求的查詢字符串有一個callback參數，用來指定回調函數的名字
 
// 處理服務器返回回調函數的數據
<script type="text/javascript">
    function dosomething(res){
        // 處理獲得的數據
        console.log(res.data)
    }
</script>

data.php：

header('Content-type: application/json');
 
//獲取回調函數名
$jsoncallback = htmlspecialchars($_REQUEST ['callback']);
 
//json數據
$json_data = '["customername1","customername2"]';
 
//輸出jsonp格式的數據
echo $jsoncallback . "(" . $json_data . ")";

2）CORS 跨域資源分享（Cross-Origin Resource Sharing）

  • 1、普通跨域請求：隻需服務器端設置 Access-Control-Allow-Origin
  • 2、帶cookie跨域請求：前後端都需要進行設置

PHP：

header("Access-Control-Allow-Origin:*");

或者 Nginx：

location ~ .*\.php$
{
    add_header 'Access-Control-Allow-Origin' '*';    # 就加這句就行
    include fcgi.conf;
    fastcgi_pass  127.0.0.1:10080;
    fastcgi_index index.php;
    expires off;
}

Javascript：

$.ajax({
   url: 'http://www.test.com:8080/login',
   type: 'get',
   data: {},
   xhrFields: {
       withCredentials: true    // 前端設置是否帶cookie
   },
   crossDomain: true,           // 會讓請求頭中包含跨域的額外信息，但不會含cookie
});

3）WebSocket 瀏覽器與服務器的全雙工通信，同時也是跨域的一種解決方案

4）Nginx 反向代理

server {
    # nginx監聽所有 test.com:9000 端口收到的請求
 
	listen       9000;
	server_name  test.com;
 
    # test.com:9000 會被轉發到 192.168.25.20:9000
	location / {
		proxy_pass http://192.168.25.20:9000;
	}
 
	# test.com:9000/api/ 會被轉發到 "192.168.25.20:9000/api/"
 
	location /api/ {
		proxy_pass http://192.168.25.20:9000;
	}
}

到此這篇關於如何利用PHP 快速解決跨域問題的文章就介紹到這瞭,更多相關PHP 跨域內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：