web跨域问题解决方案
Posted 前行-锋
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web跨域问题解决方案相关的知识，希望对你有一定的参考价值。
在前端开发及调试过程中总能遇到浏览器报如下错误：
Response to preflight request doesn\'t pass access control check: No \'Access-Control-Allow-Origin\' header is present on the requested resource.
该错误由浏览器的同源策略（同ip,同端口，同协议视为同一个域，一个域内的脚本仅仅具有本域内的权限，可以理解为本域脚本只能读写本域内的资源，而无法访问其它域的资源。这种安全限制称为同源策略。 ）所引起的。
解决方案
1.CORS（Cross-Origin Resource Sharing）是W3C在05年提出的跨域资源请求机制，它要求当前域（常规为存放资源的服务器）在响应报头添加Access-Control-Allow-Origin标签，从而允许指定域的站点访问当前域上的资源。
不过CORS默认只支持GET/POST这两种http请求类型，如果要开启PUT/DELETE之类的方式，需要在服务端在添加一个"Access-Control-Allow-Methods"报头标签
2.JSONP
JSONP(JSON with Padding)是JSON的一种“使用模式”，主要是利用script标签不受同源策略限制的特性，向跨域的服务器请求并返回一段JSON数据。
客户端
---------------------------------------------------------------
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>JSONP</title>
<script src="jq.js"></script>
</head>
<body>
<div></div>
<script>
$.ajax({
url:\'http://127.0.0.1:1234/\',
dataType:"jsonp", //告知jQ我们走的JSONP形式
jsonpCallback:"abc", //callback名
success:function(data){
console.log(data)
}
});
</script>
</body>
</html>
-------------------------------------------------------------------------------
服务端
------------------------------------------------------------------------------
var http = require(\'http\');
var urllib = require(\'url\');
var data = {\'name\': \'vajoy\', \'addr\': \'shenzhen\'};
http.createServer(function(req, res){
res.writeHead(200, { \'Content-type\': \'text/plain\'});
var params = urllib.parse(req.url, true);
//console.log(params);
if (params.query && params.query.callback) {
//console.log(params.query.callback);
var str = params.query.callback + \'(\' + JSON.stringify(data) + \')\';//jsonp
res.end(str);
} else {
res.end(JSON.stringify(data));//普通的json
}
}).listen(1234)
--------------------------------------------------------------------------------
不过JSONP始终是无状态连接，不能获悉连接状态和错误事件，而且只能走GET的形式。
http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html 参考博文
以上是关于web跨域问题解决方案的主要内容，如果未能解决你的问题，请参考以下文章