本地Ajax跨域访问 No 'Access-Control-Allow-Origin'
问题和解决方法部分转自:http://zjblogs.com/js/Access-Control-Allow-Origin.html 感谢! XMLHttpRequest cannot load http://lefeier.net/storemessage.php. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:3000’ is therefore not allowed access. 查了一翻资料,发现原来是新W3C标准中是这样规定的: 最新的W3C标准里是这么实现HTTP跨域请求的, Cross-Origin Resource Sharing 简单的来说,就是跨域的目标服务器要返回一系列的Headers,通过这些Headers来控制是否同意跨域。这些Headers有:4 Syntax 4.1 Access-Control-Allow-Origin HTTP Response Header 在 Request 包和 Response 包中都有一些。 跨域实现的过程大致如下: 从 http://www.a.com/test.html 发起一个跨域请求, 请求的地址为: http://www.b.com/test.php 如果 服务器B返回一个如下的header Access-Control-Allow-Origin: http://www.a.com 那么,这个来自 http://www.a.com/test.html 的跨域请求就会被通过。 如上所知,总结解决办法如下: 1、如果请求的url是aspx页面,则需要在aspx页面中添加代码:Response.AddHeader(“Access-Control-Allow-Origin”,“*”); 2、如果请求的url是PHP页面,则需要在PHP页面中添加代码:header(“Access-Control-Allow-Origin: *”); 3、如果请求的url是静态的html页面,则需要在页面中添加meta标签代码: 如果服务器端可以确定是要被哪些域名访问,最好是能把以上代码中的“*”代替为具体的域名,这样做可以相应的增强安全性。 在php代码中添加 header(“Access-Control-Allow-Origin: http://localhost:3000“);后测试成功,写localhost同样很危险,但是开发过程中应该不会出现这样的情况,肯定是具体的域名。 实现跨域的主要代码,做IE浏览器兼容,最简单的方法是检查是否存在withCredentials属性,再配合检查XDomainRequest 对象是否存在。 <form id="leave-comment" class="comment-form">
<label for="comment">COMMENT*</label>
<textarea id="comment" name="comment" rows="4" cols="40"> </textarea>
<label for="nickname">NICKNAME</label>
<input type="text" name="nickname" id="nickname">
<label for="email">EMAIL* </label>
<input type="text" name="email" id="email" placeholder="Your email will not be published">
<label for="url">WEBSITE</label>
<input type="text" name="url" id="url" placeholder="http://">
<button id='submit-btn'>POST COMMENT</button>
</form>
JavaScript部分 function createCORSRequest(method,url) {
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr) {
xhr.open(method,url,true);
} else if (typeof XDomainRequest != "undefined") {
xhr = new XDomainRequest();
xhr.open(method,url);
} else {
xhr = null;
}
return xhr;
}
function handleSend() {
var request = createCORSRequest("post","http://lefeier.net/storemessage.php");
if (request) {
request.onload = function() {
console.log(request.responseText);
};
request.onerror = function() {
alert("An error occurred.");
};
request.send(new FormData(document.getElementById('leave-comment')));
}
}
var btn = document.getElementById('submit-btn');
btn.addEventListener('click',function(event) {
event.preventDefault();
handleSend();
});
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- 【Cocos2d-x Lua笔记四】Quick-Cocos2d-x
- 正则删除所有空行
- ios – popover segues中使用的Anchor和Passthrough是什么?
- Qt assistant.exe Cannot load sqlite database driver 的解
- MTD(3)---nand flash的erase,read,write接口函数代码分析
- cocos2d-x时钟小项目
- .NET Framework 4.0 安装SQLite Provider碰到的一些问题
- Oracle客户端安装错误 – 路径太长
- Xml的三种解析方式
- ruby-on-rails – 强制重新加载自动加载的库文件所需的库文