AJAX跨域解決方案

一、AJAX跨域解決方案domain

如果兩個頁面的域名相同，就可以採用這種方案了，也是比較常用的一種方案。

在請求端的頁面html中設置document.domain為頂級域名，另一端返回頁面中同樣設置document.domain為頂級域名。

// 請求端頁面代碼
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
document.domain = "example.com";
function receiveMessage(event) {
    console.log(event.data);
}
window.addEventListener("message", receiveMessage, false);
var targetWindow = document.getElementById("iframe").contentWindow;
targetWindow.postMessage("Hello from the parent page!", "http://www.example.com");
</script>
</head>

<body>
<iframe id="iframe" src="http://sub.example.com"></iframe>
</body>
</html>

// 接收端頁面代碼
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
document.domain = "example.com";
function receiveMessage(event) {
    console.log(event.data);
    event.source.postMessage("Hello from the targeted page!", "http://www.example.com");
}
window.addEventListener("message", receiveMessage, false);
</script>
</head>

<body>
</body>
</html>

二、AJAX跨域問題(三種解決方案)

1、JSONP：利用script標籤的src屬性，從其他域名獲取JS腳本，該腳本的內容就是JSON數據，通過函數回調得到JSON數據。

$.ajax({
    url: "http://www.`b.com/abc.php?callback=?",
    dataType: "jsonp",
    success: function(data) {
        console.log(data);
    }
});

注意：後端介面需要返回如下的數據格式，其中callback是前端定義的函數名，需要與請求參數中的一致。

callback({
    「data1」:」value1」,
    「data2」:」value2」
});

2、CORS(Cross-Origin Resource Sharing)：設置Access-Control-Allow-*頭信息

1、PHP代碼
header("Access-Control-Allow-Origin:*");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type,";
header("Access-Control-Allow-Methods: PUT,POST,GET,DELETE,OPTIONS");
2、Node.js代碼
app.all("*", function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With,Content-Type");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    next();
});

3、postMessage：在子頁面與父頁面之間進行通信，前端在不同域名下的頁面之間使用iframe。

// 父頁面代碼
var targetWindow = document.getElementById("iframe").contentWindow;
targetWindow.postMessage("Hello from the parent page!", "http://www.example.com");

// 子頁面代碼
function receiveMessage(event) {
    console.log(event.data);
}
window.addEventListener("message", receiveMessage, false);

三、nginx跨域解決方案

如果使用Nginx作為伺服器，可以在Nginx配置文件nginx.conf中加入如下代碼：

add_header Access-Control-Allow-Origin *;

四、前端AJAX跨域解決方案

前端對於跨域請求，我們需要注意的是Cookies和其他的憑證信息還有Content-Type頭信息並不會發送出去，所以我們需要特定設置xhrFields，代碼如下：

$.ajax({
    url: "http://www.`b.com/abc.php",
    dataType: "json",
    type: "GET",
    xhrFields: {
        withCredentials: true //解決跨域問題
    },
    success: function(data) {
        console.log(data);
    },
    error: function(xhr, a, b) {
        console.log(a);
    }
});

五、AJAX跨域的解決辦法

如果需要解決客戶端的跨域請求，可以通過配置服務端允許訪問的域來實現。

對於Tomcat可以在web.xml中加入如下代碼：

<filter>
    <filter-name>CorsFilter</filter-name>
    <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
    <init-param>
        <param-name>cors.allowed.origins</param-name>
        <param-value>http://www.a.com, http://www.b.com</param-value>
    </init-param>
    <init-param>
        <param-name>cors.allowed.headers</param-name>
        <param-value>Origin, X-Requested-With, Content-Type, Accept, Authorization</param-value>
    </init-param>
    <init-param>
        <param-name>cors.allowed.methods</param-name>
        <param-value>GET, POST, PUT, DELETE</param-value>
    </init-param>
    <init-param>
        <param-name>cors.preflight.maxage</param-name>
        <param-value>1800</param-value>
    </init-param>
</filter>

六、AJAX解決跨域的方法

解決跨域問題有很多方法，在實際的開發中需要根據實際情況進行選擇。

七、AJAX請求跨域解決方案

在AJAX請求中，可以採用CORS（跨域資源共享）；JSONP；postMessage；以及代理伺服器轉發等方法來解決跨域問題。

八、AJAX解決跨域問題

跨域問題的根本在於瀏覽器的同源策略限制，而跨域解決方案也正是為了克服瀏覽器的同源限制而出現的解決方案。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/283388.html