CORS（跨源资源共享）实战
声明：本文中的cors为createCORSRequest返回的对象
1、 同一跨域接口
function createCORSRequest(method, url) {
var xhr = new XMLHttpRequest();
// 支持cors，检查xhr的withCredentials属性
if("withCredentials" in xhr) {
xhr.open(method, url, true);
}
// IE8
else if(typeof XDomainRequest != "undefined") {
xhr = new XDomainRequest();
xhr.open(method, url);
} else {
xhr = null;
}
return xhr;
}
2、格式化post 传递的数据
function postDataFormat(obj){
if(typeof obj != "object" ) {
alert("输入的参数必须是对象");
return;
}
// 支持有FormData的浏览器（Firefox 4+ , Safari 5+, Chrome和Android 3+版的Webkit）
if(typeof FormData == "function") {
var data = new FormData();
for(var attr in obj) {
data.append(attr,obj[attr]);
}
return data;
}else {
// 不支持FormData的浏览器的处理
var arr = new Array();
var i = 0;
for(var attr in obj) {
arr[i] = encodeURIComponent(attr) + "=" + encodeURIComponent(obj[attr]);
i++;
}
return arr.join("&");
}
}
3、格式化get请求查询参数
function getDataFormat(obj) {
if(typeof obj != "object" ) {
alert("输入的参数必须是对象");
return;
}
var arr = new Array();
var i = 0;
for(var attr in obj) {
arr[i] = encodeURIComponent(attr) + "=" + encodeURIComponent(obj[attr]);
i++;
}
return "?" + arr.join("&");
}
4、cors.abort() 该方法用于停止正在进行的请求
5、error: 用于检测错误
cors.onerror = function() {
// 处理错误的代码
};
6、load: 用于检测成功
cors.onload = function() {
// 处理成功的代码
};
7、send(null | postData) 用于发送数据 ,请求方式为get时为null, 请求方式为post时为postData
8、get跨域请求实例
var data = {name:"ccb"};
var xhr = createCORSRequest("get", http://www.question.com/php/test.php+ getDataFormat(data));
xhr.onload = function() {
alert(xhr.responseText);
};
xhr.onerror = function() {
alert("跨域请求出错");
};
xhr.send(null);
9、post跨域请求实例
var data = {name:"ccb"};
var xhr = createCORSRequest("post", "http://www.question.com/php/test.php");
xhr.onload = function() {
alert(xhr.responseText);
};
xhr.onerror = function() {
alert("跨域请求出错");
};
xhr.send(postDataFormat(data));
10、 跨域请求中的服务器端的设置
方法一：Apache配置文件配置
在Apache配置文件（Apache\conf\extra\httpd-vhosts.conf）的<Directory>, <Location>, <Files>或<VirtualHost>的配置里加入以下内容即可：
Header set Access-Control-Allow-Origin *
或
Header set Access-Control-Allow-Origin http://www.test.com（具体站点）推荐
方法二：PHP文件中设置
PHP：只需要使用如下的代码设置即可。
header("Access-Control-Allow-Origin:*");
或
header("Access-Control-Allow-Origin: http://www.test.com ") 推荐具体域名后面不可以加“/”
以上的配置的含义是允许任何域发起的请求都可以获取当前服务器的数据。当然，这样有很大的危险性，恶意站点可能通过XSS攻击我们的服务器。所以我们应该尽量有针对性的对限制安全的来源。使用推荐方式。
最新文章
- ASP.NET Core 中间件Diagnostics使用
- Swift中的可选链与内存管理(干货系列)
- nodejs学习笔记（一）
- iOS - 果冻效果
- Android学习笔记之图片轮播...
- $.toJSON的使用方法
- Configuration problem: Only one AsyncAnnotationBeanPostProcessor may exist within the context.
- SGU 114
- codeforces 468B 2-sat
- Javascript注意事项四【提高循环性能的策略】
- CSS Gradient详解
- iOS 百度地图大头针使用
- 1.1-学习Opencv与MFC混合编程之---利用画图函数，生成视频，并写入视频文件
- 201521123073 《Java程序设计》第8周学习总结
- ADO.NET访问数据库
- Maven 环境配置
- IO&&Serize 利用线程Thread.Sleep实现"自动输出"
- 华为云(ECS)-linux服务器中-Ubuntu图形界面安装-解决root登录受限-VNCviwer/Teamviwer远程访问教程
- 我的秋招经验分享（已拿BAT头条网易滴滴）
- P5301 [GXOI/GZOI2019]宝牌一大堆