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/n/283388.html