元芳 ,Js 跨域之李代桃僵,你还看吗?

找替死鬼.png

跨域的方法大致有七计

<br />

javascript的同源策略

同源策略是指协议,主机和端口 相同,就是为同源,不管后面在跟什么参数,否则都是跨域

个人觉得服务器上设置代理页面 或者设置跨域头cros最方便

<br />

锦囊一

在服务器上设置代理页面 ,如果是有类似nginx 服务的话,可以配置nginx 反向代理,因为跨域只针对浏览器.

比如nginx.conf

server {
listen  80;
server_name localhost;

location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
}

location /mesos/ {
    rewrite ^/mesos(/.*)$ $1 break;
    proxy_pass http://node1:5050;
}

location /marathon/ {
    rewrite ^/marathon(/.*)$ $1 break;
    proxy_pass http://node1:8080;
}

error_page  404 /404.html;

error_page  500 502 503 504 /50x.html;
location = /50x.html {
    root    /usr/share/nginx/html;
}
}

锦囊二

设置跨域头。
在responseHeader 里面设置 Access-Control-Allow-Origin: *
Access - Control -Allow - credentials (请求的时候会带上cookie)
Access-Control-Allow-Methods: POST, GET, OPTIONS,PUT, DELETE

比如node下定义个中间件
module.exports.crossOrigin = function( req, res, next ) {

res.header( "Access-Control-Allow-Origin", "*" );

next();

};

锦囊三

Jsonp 是在客户端生成1个callback回调,之后通过script标签把这个名称发到服务器端。服务器端以javascript 语法的方式包装一下json数据,生成1个函数调用,函数名称是callback,客户端解析script,并且执行返回的javascript文档。

jsonp.png

锦囊四

post+动态生成iframe是可以达到post跨域的目的、 form 表单提交是会刷新当前页面的。我们可以设置form 的target 属性,1个隐藏的ifram,当post提交数据后,我们能在iframe中得到返回的结果,并且在iframe 操作js,其实幕后推手是iframe

锦囊五

通过修改document.domain来跨子域
将子域和主域的document.domain设为同一个主域.前提条件:这两个域名必须属于同一个基础域名!而且所用的协议,端口都要一致,否则无法利用document.domain进行跨域

主域相同的使用document.domain

需要基础域名相同
比如 a.baidu.com 和 b.baidu.com
document.domain=‘baidu.com’ 就可以跨域了。

domain.jpg

锦囊六

使用window.name来进行跨域

window
对象有个name
属性,该属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name
的,
每个页面对window.name
都有读写的权限,window.name
是持久存在一个窗口载入过的所有页面中的

window.name局限在于只能通过window.name 传值,并且也是get 方式
window_name.jpg

<br />

锦囊七

使用HTML5中新引进的window.postMessage方法来跨域传送数据

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

推荐阅读更多精彩内容

  • 1. 什么是跨域? 跨域一词从字面意思看,就是跨域名嘛,但实际上跨域的范围绝对不止那么狭隘。具体概念如下:只要协议...
    他在发呆阅读 821评论 0 0
  • 1. 什么是跨域? 跨域一词从字面意思看,就是跨域名嘛,但实际上跨域的范围绝对不止那么狭隘。具体概念如下:只要协议...
    w_zhuan阅读 505评论 0 0
  • 跨域资源共享 CORS 对于web开发来讲,由于浏览器的同源策略,我们需要经常使用一些hack的方法去跨域获取资源...
    默默先生Alec阅读 580评论 0 0
  • 最近看《史密斯夫妇》,心里就在想为什么约翰就看上简了呢?难道是在对的时间看上了对的人?这样的解释未免落了俗套,一种...
    烦人的昵称阅读 184评论 0 1
  • 有些坚持不住。
    lapetite33明天在哪里阅读 247评论 0 0