产生跨域问题的原因
跨域问题是浏览器同源策略限制,当前域名的js只能读取同域下的窗口属性。
跨域问题产生的场景
当要在在页面中使用js获取其他网站的数据时,就会产生跨域问题,比如在网站中使用ajax请求其他网站的天气、快递或者其他数据接口时以及hybrid app中请求数据,浏览器就会提示以下错误。这种场景下就要解决js的跨域问题。
XMLHttpRequest cannot load http://你请求的域名. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://当前页的域名' is therefore not allowed access.
哪些情况会产生跨域问题
一个网站的网址组成包括协议名,子域名,主域名,端口号。比如 https://github.com/ ,其中https是协议名,www是子域名,github是主域名,端口号是80,当在在页面中从一个url请求数据时,如果这个url的协议名、子域名、主域名、端口号任意一个有一个不同,就会产生跨域问题。
即使是在 http://localhost:80/
页面请求 http://127.0.0.1:80/
也会有跨域问题
解决跨域问题
解决跨域问题有以下一种方式
- 使用jsonp
- 服务端代理
- 服务端设置
Request Header
头中Access-Control-Allow-Origin
为指定可获取数据的域名
jsonp的解决方式
json≠jsonp
原理
jsonp解决跨域问题的原理是,浏览器的script
标签是不受同源策略限制(你可以在你的网页中设置script
的src
属性问cdn服务器中静态文件的路径)。那么就可以使用script标签从服务器获取数据,请求时添加一个参数为callbakc=?,?号时你要执行的回调方法。
前端实现
以jQuery2.1.3的ajax方法为例
$.ajax({
url:"",
dataType:"jsonp",
data:{
params:""
}
}).done(function(data){
//dosomething..
})
仅仅是客户端使用jsonp请求数据是不行的,因为jsonp的请求是放在script
标签中的,和普通请求不同的地方在于,它请求到的是一段js代码,如果服务端返回了json字符串,那么浏览器就会报错。所以jsonp返回数据需要服务端做一些处理。
服务端返回数据处理
上面说了jsonp的原理是利用script
标签来解决跨域,但是script
标签是用来获取js代码的,那么我们怎么获取到请求的数据呢。
这就需要服务端做一些判断,当参数中带有callback属性时,返回的type要为application/javascript
,把数据作为callback的参数执行。下面是jsonp返回的数据的格式示例
/**/ typeof jQuery21307270454438403249_1428044213638 === 'function' && jQuery21307270454438403249_1428044213638({"code":1,"msg":"success","data":{"test":"test"}});
这是express4.12.3关于jsonp的实现代码
// jsonp
if (typeof callback === 'string' && callback.length !== 0) {
this.charset = 'utf-8';
this.set('X-Content-Type-Options', 'nosniff');
this.set('Content-Type', 'text/javascript');
// restrict callback charset
callback = callback.replace(/[^\[\]\w$.]/g, '');
// replace chars not allowed in JavaScript that are in JSON
body = body
.replace(/\u2028/g, '\\u2028')
.replace(/\u2029/g, '\\u2029');
// the /**/ is a specific security mitigation for "Rosetta Flash JSONP abuse"
// the typeof check is just to reduce client error noise
body = '/**/ typeof ' + callback + ' === \'function\' && ' + callback + '(' + body + ');';
}
服务端设置Access-Control-Allow-Origin
这种方式只要服务端把response的header头中设置Access-Control-Allow-Origin
为制定可请求当前域名下数据的域名即可。一般情况下设为即可。这样客户端就不需要使用jsonp来获取数据。
关于Access-Control-Allow-Origin
设为是否会有安全问题,知乎上有个讨论。
浏览器支持
Access-Control-Allow-Origin是html5新增的一项标准,IE10以下是不支持的,所以如果产品面向的是PC端,就要使用服务端代理或jsonp。
相关推荐
该文章详细的讲解了JS跨域原理及过程,并总结了JS跨域出现的问题和解决方案
解决方案: 1.jsonp 在远程服务器上设法动态的把数据装进js格式的文本代码段中,供客户端调用和进一步处理;在前台通过动态添加script标签及src属性,表面看上去与ajax极为相似,但是,这和ajax并没有任何关系;...
主要介绍了js跨域原理以及解决方案,跨域问题是由于javascript语言安全限制中的同源策略造成的,想要进一步了解跨域的朋友可以参考本文进行学习
在自己页面显示其他网站上面的数据,需要用Ajax,就涉及到跨域问题, 解决方案:jQuery.support.cors = true; (浏览器支持跨域访问), 实例: 代码如下: //浏览器支持跨域访问 jQuery.support.cors = true; $.ajax...
javascript出于安全方面的考虑,不允许跨域调用其他页面的对象。但是在安全限制的同时也给注入iframe或是...跨域简单的理解就是因为javascript同源策略的限制,a.com域名下的js无法操作b.com或者是c.a.com域名下的对象
而script、script、iframe标签的src属性就不存在跨域的问题,所以Ajax跨域就是利用这一点以及js对JSON的支持,外部服务只要给Ajax的请求响应一段JS代码或JSON数据,就能被Ajax获取到。 由于安全方面的原因, 客户端js...
平时用惯了jQuery.ajax之类的方法,却时常忽略了它背后的实现,本文是学习了AJAX基础及几种跨域解决方案之后的一些收获。
宁夏省市级地图js和json文件,精确到各市轮廓地图,样例使用北京市地图,建议用火狐打开,谷歌请参考跨域解决方案
主要解决方案:使用qs.stringify 1、安装qs npm install qs –save 2、axios配置和使用 在接口请求页面引入安装好的qs,如下图: 引入完成之后使用qs改变传递的参数data,如下: 这样就可以了,post请求的时候就...
JSONP就是目前主流的实现跨域通信的解决方案。 虽然在在jquery中,我们可以通过$.ajax的dataType设置为jsonp来调用jsonp,但是jsonp和ajax的实现原理一个关系都木有。jsonp主要是通过script可以链接远程url来实现...
node.js v12.13.0 1104,主应用采用vue-cli脚手架,重新创建新的demo目录下admin-wu主要应用microfrontend-demo主要应用sub-app1为子应用sub-app2为子应用已解决1,子应用与主应用,子应用与子应用跨域问题2,主应用...
支持域白名单功能,实现跨域共享数据,独特的跨域数据共享解决方案 独特的域数据模块化解决方案 高安全性(可以通过更改proxy来隐藏数据所存储的真实域) 支持 或 Callback 异步编程 支持 objectId 整体架构 LocalDB...
7. 熟悉Vue的常见问题和解决方案,如跨域、SSR、SEO等。 8. 在面试中展示自己的Vue项目经验和技能,如开发过的项目、使用的技术栈等。 9. 在面试中展示自己的学习能力和解决问题的能力,如对新技术的学习和应用、...
JQuery AJAX提交中文乱码的解决方案 Jquery css函数用法 JQuery中getJSON的使用方法 Jquery中显示隐藏的实现代码分析 JQuery全选功能的实现 JQuery特效——下拉菜单 JQuery系列教程之XPath选择符 JQuery系列教程之...
Axios 和 JsonP 进行跨域请求数据,利用浏览器本地存储来进行数据存储,最后会利用 rem 适配方案来解决移动端常见适配问题,以及利用 Fastclick 来解决移动端 300ms 延迟问题。 论文研究的是PS+Axure的音乐APP-FLASH...
初识jsonpjsonp 全称是JSON with Padding,是为了解决跨域请求资源而产生的解决方案。很多时候我们需要在客户端获取服务器数据进行操作,一般我们会使用ajax+webservice做此事,但是如果我们希望获取的数据和当前...
全书以问题为导向,精选了前端开发中的34个疑难问题,从分析问题的原因入手,逐步给出解决方案,并分析各种方案的优劣,最后针对每个问题总结出高效编程的最佳实践和各种性能优化的方法。全书共7章,内容从逻辑上...
招聘者可能会问一些关于Vue实际应用的问题,例如如何优化Vue性能、如何处理跨域问题等,应聘者需要准备好自己的实践经验,给出实际可行的解决方案。 3. 代码能力也很重要:在面试中,招聘者可能会让应聘者写一些Vue...