ajax前台后台跨域请求处理方式

当浏览器端发起跨域请求时，如果请求头中不包含适当的跨域示意标识，目标服务器会拒绝该请求，所以前端需要先向服务器获取跨域请求准许，然后再发起跨域请求。这个过程涉及到的技术就是 ajax 前台后台跨域请求处理方式。

下面是处理跨域请求的完整攻略和两个示例：

1. 服务器端处理方式

1. 如果前台请求是 GET 请求，服务器端需要处理跨域请求，在 HTTP 响应头中添加如下内容：

   Access-Control-Allow-Origin: <前台请求的地址>

   例如，如果前台请求是从 "http://www.example.com/hello.html" 发起的，那么服务器端应该添加如下响应头：

   Access-Control-Allow-Origin: http://www.example.com

2. 如果前台请求是 POST 请求，服务器端在响应头中需要添加的内容如下：

   Access-Control-Allow-Origin: <前台请求的地址>
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: x-requested-with, content-type, accept

   其中：

   • Access-Control-Allow-Origin 告诉浏览器哪些源是被允许的，必须指定该头部
   • Access-Control-Allow-Methods 告诉浏览器后台所允许的 HTTP 请求方法类型
   • Access-Control-Allow-Headers 告诉浏览器响应的头部中允许包含哪些字段

2. 前端处理方式

1. 如果前台请求是 GET 请求，使用 jQuery 的 AJAX 方法，向服务器端发送跨域请求：

   $.ajax({
type: "GET",
url: "http://www.example.com/api/some-data",
crossDomain: true,
dataType: "json",
success: function(data) {
console.log("获取数据成功！");
},
error: function(xhr, status, error) {
console.log("获取数据失败！");
}
});

   其中 crossDomain 属性表示这是一个跨域请求。

2. 如果前台请求是 POST 请求，使用以下方式向服务器端发送跨域请求：

   var xhr = new XMLHttpRequest();
xhr.open("POST", "http://www.example.com/api/some-data");
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
xhr.onreadystatechange = function() {
if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
console.log("获取数据成功！");
} else {
console.log("获取数据失败！");
}
};
xhr.send(JSON.stringify({key: "value"}));

   其中通过 XMLHttpRequest 对象设置请求头。

以上是 ajax 前台后台跨域请求处理方式的完整攻略，反复阅读，能够更加掌握。