跨域请求小总结

最新推荐文章于 2025-09-11 10:39:32 发布

转载最新推荐文章于 2025-09-11 10:39:32 发布 · 48 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/benxiaohai-microcosm/p/8691452.html

文章标签：

#json #javascript #前端 #ViewUI

本文介绍了五种跨域请求的方法：jsonp、代理、CORS、CSST及postmessage跨域，详细解析了每种方法的工作原理及其应用场景。

跨域请求，顾名思义就是请求不在同一个域名里的内容，出于浏览器安全策略，这种请求多半会被拒绝。那么，我们如何避免由于跨域造成的请求失败呢？

1.jsonp

这是一种仅适用于get请求方式的跨域解决方案，我们知道，JavaScript的script标签是不存在跨域请求不被允许的情况的，jsonp就是利用这一属性来实现不在同一域名的内容的请求的。

jQuery中对该方法说明如下：如果获取的数据文件存放在远程服务器上（域名不同，也就是跨域获取数据），则需要使用jsonp类型。使用这种类型的话，会创建一个查询字符串参数 callback=? ，这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名，以便完成一个有效的JSONP请求。意思就是远程服务端需要对返回的数据做下处理，根据客户端提交的callback的参数，返回一个callback(json)的数据，而客户端将会用script的方式处理返回数据，来对json数据做处理。JQuery.getJSON也同样支持jsonp的数据方式调用。

eg：

客户端JQuery.ajax的调用代码示例：

$.ajax({
	type : "get",
	async:false,
	url : "http://www.xxx.com/ajax.do",
	dataType : "jsonp",
	jsonp: "callbackparam",//服务端用于接收callback调用的function名的参数
	jsonpCallback:"success_jsonpCallback",//callback的function名称
	success : function(json){
		alert(json);
		alert(json[0].name);
	},
	error:function(){
		alert('fail');
	}
});

服务端返回数据的示例代码：

public void ProcessRequest (HttpContext context) {
	context.Response.ContentType = "text/plain";
	String callbackFunName = context.Request["callbackparam"];
	context.Response.Write(callbackFunName + "([ { name:\"John\"}])");
}

2.代理

这个也可以说是服务器跨域，就是由后台去跨域，然后把内容在同域中由服务器传给前端，这是通过绕过前端浏览器来解决跨域请求问题。

3.CORS

Cross-Origin Resource Sharing(跨域资源共享)是一种允许当前域（origin）的资源（比如html/js/web service）被其他域（origin）的脚本请求访问的机制。这是现代浏览器的一种实现方式。

eg：

Access-Control-Allow-Origin:*;//允许所有来源访问

Access-Control-Allow-Method:POST,GET;//允许访问的方式

前端代码：

//http://127.0.0.1:8888/cors.html
var xhr = new XMLHttpRequest();
xhr.onload = function(data){
  var _data = JSON.parse(data.target.responseText)
  for(key in _data){
    console.log('key: ' + key +' value: ' + _data[key]);
  }
};
xhr.open('POST','http://127.0.0.1:2333/cors',true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send();

后端代码：

//http://127.0.0.1:2333/cors
app.post('/cors',(req,res) => {
  if(req.headers.origin){
    res.writeHead(200,{
      "Content-Type": "text/html; charset=UTF-8",
      "Access-Control-Allow-Origin":'http://127.0.0.1:8888'
    });
    let people = {
      type : 'cors',
      name : 'weapon-x'
    }
    res.end(JSON.stringify(people));
  }
})

4.CSST

一种用 CSS 跨域传输文本的方案。相比 JSONP 更为安全，不需要执行跨站脚本。

链接：csst

5.postmessage跨域

在HTML5中新增了postMessage方法，postMessage可以实现跨文档消息传输（Cross Document Messaging），Internet Explorer 8, Firefox 3, Opera 9, Chrome 3和 Safari 4都支持postMessage。
该方法可以通过绑定window的message事件来监听发送跨文档消息传输内容。
使用postMessage实现跨域的话原理就类似于jsonp，动态插入iframe标签，再从iframe里面拿回数据

转载于:https://www.cnblogs.com/benxiaohai-microcosm/p/8691452.html