关于http请求跨域问题常用解决方案

写在前面的:

为什么需要跨域:同源策略(Same-Origin Policy)。所谓同源是指,域名,协议,端口相同。

不同源(域名、协议、端口只要有一个不同)的客户端脚本(JavaScript)在没明确授权的情况下,不能读写对方的资源。


1、关于只在chrome浏览器端设置的跨域:

在chrome的桌面快捷图标上右键——>属性——>快键方式一栏。在目标一栏的输入框里后面追加下面加粗斜体的一串字符串,注意和前面部分有空格。其中C:\MyChromeDevUserData需要在c盘新建一个空的这个文件夹。然后重启chrome浏览器。只有从桌面快捷方式打开的才有效。

"D:\Program Files\googlechrome_dev\chrome.exe" --args --disable-web-security --user-data-dir=C:\MyChromeDevUserData,--user-data-dir

如果看到:

表示设置成功。

2、post跨域上传文件的iframe解决方案:jsp页面方式。

首先,在window对象下定义一个方法,参数为后端传过来的数据。

然后,在待提交的表单里要添加一个隐藏的input ,设置name为'callback', value值为上面window下定义的那个方法名。

然后,在body里动态添加一个隐藏的iframe页面,在这个iframe页面里通过js设置它的document.domain为父域。

代码为:var str = location.hostname;

document.domain = str.substring(str.indexOf(".") + 1);

然后再这这个iframe里调用父页面定义的那个在window下的方法。可以是通过jsp页面后端传过来的参数:parent["${param.callback}"]( ${res} );其中${res}为后端传过来的前端所需要的参数。


3、普通的ajax也可以通过iframe来实现跨域请求数据:待补充。

实现原来大体和上面差不多。也是让后端返回一个页面把数据填写到js里面,然后前端通过一个iframe去加载这个页面。

document.domain + iframe      (只有在主域相同的时候才能使用该方法);

但是缺点是性能比较低。


4、Jsonp方式实现跨域请求:script标签不受同源限制

JSONP包含两部分:动态构造一个script标签添加到页面一个接受数据的回调函数

jsonp只支持get的请求方式,因为它只能通过script标签的src传入参数。所以不支持文件上传,安全性比较弱,所传的参数量也比较少。

利用元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的javascript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。

使用原生方式来写jsonp:

jsonp跨域的js原生写法

jsonp的核心法则是动态添加:下面是使用jquery的ajax封装好的jsonp:

使用JSONP的示例

5、最官方实用的跨域: 后端设置cors实现跨域。

简单说就是在后端返回的Response Headers里设置一个允许访问的请求源。

在NodeJS中可以这样:

使用cors跨域对请求头的设置

在其他语言的后端也是类似的。

其中,Access-Control-Allow-Origin就是我们需要设置的域名,Access-Control-Allow-Methods是允许的请求方式,Access-Control-Allow-Headers跨域允许包含的头。


6、To be continue......

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,686评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,668评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,160评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,736评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,847评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,043评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,129评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,872评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,318评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,645评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,777评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,470评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,126评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,861评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,095评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,589评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,687评论 2 351

推荐阅读更多精彩内容