ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

jsonp和CORS解决跨域问题

2020-12-14 15:29:30  阅读:165  来源: 互联网

标签:src 跨域 res CORS 接口 callback jsonp


在这里插入图片描述
出现此问题代表跨域了。目前最常用的2中解决跨域问题的方法:
1、jsonp通过src属性实现(前端操作)
2、cors(后端操作)

1、jsonp方案

原理

1、前端设置一个函数(用来接收数据),通过src请求接口时,用callback将函数名传递过去
2、后端通过express中jsonp的方法调用函数,将数据传给前端

前端操作原理:(src属性)

//1、设置一个函数来接收数据
function aa(res){console.log(res)}	//res拿到结果

//2、通过src属性请求接口,通过callback将函数名传给后端
<script src='接口地址?callback=aa' ></script>

后端操作原理:(express中封装的jsonp方法)
在这里插入图片描述

jsonp 实际操作

jquery中提供了解决跨域的方法:
1、$.ajax()

在$.ajax中添加dataType:"jsonp"即可解决跨域

2、$.getJSON()

接口地址后通过callback即可
$.getJSON('接口地址?callback=?',	//url后添加?call=?即可
	data,
	function(res){
		console.log(res);
	})

2、CORS方案

只需要后端设置响应头即可解决跨域

res.set({
'Access-Control-Allow-Origin':'*'	//*代表所有浏览器都可请求
})

标签:src,跨域,res,CORS,接口,callback,jsonp
来源: https://blog.csdn.net/qq_40576178/article/details/111164312

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有