由于浏览器的同源策略,如果发送请求url的协议、域名、端口之间任意一个与当前页面地址(request headers的HOST)不同,则为跨域请求。这里探讨一下jsonp和cros两种实现跨域的方法
JSONP
1.浏览器对<script>,<link>,<img>等加载脚本,样式表,图片等资源的标签没有同源限制,而且资源加载后在没有阻塞的情况下会立即执行。利用script的这种特性可以动态插入一个script标签
<script src="https://localhost:8080/login?callback=jsonpCallback"></script>
<script>
function jsonpCallback(result) {
//alert(result);
for(var i in result) {
alert(i+":"+result[i]);
}
}
</script>
2.另外jquery也已经内部实现了跨域
$.ajax({
url:"https://localhost:8080/login",
data:{
name:"ccc",
email:"cccc@163.com"
},
type:"get",
datatype:"json",
success:function(result){
if(result!=null) {
console.log(result)
}
}
});
CROS
CORS需要浏览器和服务器同时支持,下面是我本地实现的一个小例子
客户端
var xmlhttp=new XMLHttpRequest();
if (!xmlhttp) {
alert("创建xmlhttp对象异常!");
return false;
}
var url = "http://localhost:8000/cros";
xmlhttp.open("GET", url, true);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlhttp.onreadystatechange = function () {
console.log("onreadystatechange and readyState:"+xmlhttp.readyState+", status:"+xmlhttp.status);
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
document.write(xmlhttp.responseText);
}
}
}
xmlhttp.send();
服务器端nodejs
res.writeHead(200, {
'Content-Type': 'text/html; charset=utf-8',
'Access-Control-Allow-Origin':'http://localhost:63342'/*,
'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type'*/
});
res.write('cors');
res.end();
//readyState属性指出了XMLHttpRequest对象在发送/接收数据过程中所处的几个状态。XMLHttpRequest对象会经历5种不同的状态。
//0:未初始化。对象已经创建,但还未初始化,即还没调用open方法;
//1:已打开。对象已经创建并初始化,但还未调用send方法;
//2:已发送。已经调用send 方法,但该对象正在等待状态码和头的返回;
//3:正在接收。已经接收了部分数据,但还不能使用该对象的属性和方法,因为状态和响应头不完整;
//4:已加载。所有数据接收完毕
分享到:
相关推荐
根据提供的文件信息,本文将详细解释“JS跨域访问后台”的相关知识点,包括跨域的基本概念、实现方式以及具体的代码示例。 ### 跨域基本概念 在浏览器中,为了安全考虑,存在一种称为“同源策略”的机制。简单来说...
标题《JS跨域访问解决方案总结.pdf》指明文档的核心内容是关于JavaScript跨域访问问题的解决方法。跨域访问问题是指由于浏览器的同源策略限制,网页中JavaScript代码出于安全原因不能访问另一个源(域名、协议或端口...
JS 跨域访问解决方案总结 JS 跨域访问解决方案总结是指在不同域名站点之间进行资源访问的解决方案。默认情况下,脚本访问文档属性等数据采用的是同源策略(Same origin policy),即如果两个页面的协议、域名和端口...
JS跨域访问解决
"解决JS跨域访问IFrame的解决方案"这一主题关注的就是如何克服这个限制,使得在JSP页面中嵌入的跨域IFrame能够正常通信。下面我们将详细探讨这个问题以及可能的解决方案。 首先,理解同源策略是关键。同源策略是...
JavaScript跨域访问解决方案 在Web开发中,JavaScript的同源策略是浏览器为了保障用户安全而实施的一项重要机制。它限制了脚本只能访问与当前页面具有相同协议(如http或https)、主机名和端口号的资源。然而,在...
JavaScript跨域访问解决方案 在Web开发中,由于同源策略的限制,JavaScript通常只能与同一协议、域名和端口的服务器进行通信。然而,随着Web应用程序的复杂性和交互性增加,跨域请求变得越来越普遍,比如加载外部...
文章标题“服务器端用可控js跨域访问”与描述中的重复内容,实际上指出了一个关键的技术点:如何在不违反同源策略的情况下,使用JavaScript进行跨域数据请求。 ### 同源策略 同源策略(Same-origin policy)是...
JavaScript跨域访问是Web开发中的常见挑战,由于浏览器的安全策略——同源策略,JavaScript通常只能访问与当前页面同源(协议、域名、端口都相同)的资源。然而,为了实现不同源之间的通信,开发者可以采取多种方法...
JavaScript跨域访问是Web开发中常见的一种挑战,由于浏览器的同源策略限制,一个域上的脚本不能直接获取或操作另一个域上的资源。为了解决这个问题,开发者通常采用以下三种主要方法:1. 基于iframe实现跨域2. JSONP...
跨域访问是网络开发中非常常见的一种需求,尤其是在现代Web应用中,不同域名下的资源需要相互访问以便集成和分享数据。在JavaScript中,这种跨域的资源访问被称为“跨域请求”,通常会受到同源策略的限制。同源策略...
在IT行业中,跨域访问是Web开发中一个重要的概念,特别是在使用JavaScript、JSP、JSON以及前端库如jQuery时。本教程将详细讲解如何利用这些技术实现跨域数据交互。 首先,我们需要理解“跨域”这个术语。在浏览器的...
### JS解决跨域访问问题详解 #### 一、引言 在现代Web开发中,跨域访问问题是开发者经常面临的一个挑战。特别是在使用JavaScript进行前后端交互时,由于浏览器的同源策略限制,开发者经常会遇到跨域问题。本文将...
JavaScript(JS)与Windows Communication Foundation(WCF)服务之间的跨域调用是Web开发中常见的需求,尤其是在构建分布式系统和前后端分离的应用时。本文将详细介绍如何实现JS跨域调用WCF服务,并通过一个控制台...