$.ajax结合node如何实现跨域请求

最新推荐文章于 2024-05-07 00:00:00 发布

dandantang_enjoy

最新推荐文章于 2024-05-07 00:00:00 发布

阅读量2.3k

点赞数 1

本文链接：https://blog.csdn.net/m0_37400258/article/details/54976232

版权

1实现跨域的方式多样，较为熟悉的算是以jsonp形式实现，但是不足在于，这种形式需要前台后台统一，一旦跨域了，如果后台不按照jsonp协议传输数据回来，会出现格式错误，取回不了数据。同时如果我们要获取其他网站的数据，不可能叫人家的后台给你以jsonp形式传数据，但是我又想用jsonp,解决办法是：

通过代理实现，同源策略只是针对浏览器端的限制，如果是在服务端，是没有限制的，因此我们可以借助node写一端代码，帮助我们去实现，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>ajax</title>
	<script src="./jquery-1.11.3.min.js"> </script>
</head>
<body>
	<h2>测试</h2>
	<button>ajax请求</button>
	
	<script>
	$('button').on("click",function(){
		$.ajax({
			 url:"http://localhost:4000/?callback=success_jsonpCallback",
			// url:"http://localhost:4000",
			type:"get",
			dataType:"jsonp",
			 jsonp:"callback",
			//jsonp: "callbackparam",
			//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)
             jsonpCallback:"success_jsonpCallback",
			//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
             success : function(msg){
                console.log(msg);
                 // alert(json[0].name);
            }
         });
	 })
	 
	</script>
</body>
</html>

服务端的代码如下：新建一个proxy.js

代码如下：

// 创建一个服务器
const url="http://v.juhe.cn/toutiao/index?type=top&key=fdbe4736f44b03fd18310ae63d058e69";
const http=require("http");
const Url=require("url");
const server=http.createServer((req,res)=>{
	// 需要向目标url发起请求，获取json数据，最总作为返回结果
	// 使用clientRequest对象发起请求，原理同爬虫抓取妹纸一样，把人家的整个页面全部抓取回来
	// 如何得到clientrequest请求了？
	
	http.get(url,(res1)=>{
		let str="";
		d=res1.on("data",(chunk)=>{
			str+=chunk;
		});
		res1.on("end",()=>{
			res.writeHead(200,{"content-type":"text/plain"});
			// res.write(str);
			res.write("callback=success_jsonpCallback("+str+")");
			res.end(); 
		})
	})
});

server.listen(4000,()=>{
	console.log("http server is listening in port 4000");
})

以上代码基本上可以解决跨域问题。

dandantang_enjoy

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
$.ajax结合node如何实现跨域请求

1实现跨域的方式多样，较为熟悉的算是以jsonp形式实现，但是不足在于，这种形式需要前台后台统一，一旦跨域了，如果后台不按照jsonp协议传输数据回来，会出现格式错误，取回不了数据。同时如果我们要获取其他网站的数据，不可能叫人家的后台给你以jsonp形式传数据，因此，但是我又想用jsonp,解决办法是：通过代理实现，同源策略只是针对浏览器端的限制，如果是在服务端，是没有限制的，因此我们可以借助
复制链接

扫一扫