前端处理跨域的四种方案

在前后端分离的开发模式广泛应用的过程中,我们不得不面对跨域这个问题,而为什么会出现跨域呢?什么情况下称为跨域呢?

跨域源自浏览器的同源策略,同源策略又分为了两种

1. ajax——协议+主机+端口,其中一个与之前页面所在的不一样,就称为ajax跨域了

2. iframe——iframeA到iframeB过程中操作共享数据,比如访问window.name会因为跨域而报错

因此,当前后端分离之后,前端的页面可能处于8080端口,而后端服务器可能处于9000端口上,那么,在前端页面向服务器发起请求时,便触发了跨域问题。

有什么办法可以解决跨域问题呢?方法有四种。

一、jsonp

原理:使用script标签,加载js代码并执行,需要在js中声明一个函数,用来作为js代码回来后的调用,参数是后台数据

    请求方式:GET方式

    特点:没有兼容性问题,但前后端都需要书写代码

    写在html文件——编写全局函数+script标签+传递函数名

        1.script标签的创建及加载 var script = document.createElement('script')

        2.服务器返回的数据 需要在函数中执行

        3. 挂载一个全局函数

            var callbackName = 'callback_' + Date.now();    //起个名字

            window[callbackName] = function (data) {    //全局函数

                //....

            }

        4.把这个函数名传递给服务器

            script.src = 'http://localhost:8889/jsonp?callback='+callbackName;//请求后台端口

        5.将标签插入body中    

            document.body.appendChild(script);

    服务器——响应“函数名('数据')”的字符串,让script标签执行

        1. 从请求url参数中获取callback对应的值 var cb = url.parse(req.url, true).query.callback

        2. 拼接“函数名(数据)”的字符串返回给字符串

            //data为对象的话使用JSON.stringify()转换后再传输

             res.end(`${cb}(${data})`);

二、CORS(跨域资源共享)

    安全性不好

    至少IE10支持

    服务器为响应头设置'Accesss-Control-Allow-Origin'等:

  Access-Control-Allow-Origin: 'http://xxx.com'  //允许哪个域在跨域的时候访问,*代表所有

  Access-Control-Allow-Credentials: true          //是否允许携带证书。cookie跨域写回给浏览器,默认不会自动携带,需要客户端设置携带并且服务器允许携带cookie才能完成跨域,同时客户端也要设置withCredentials:true + Origin不能是*

  Access-Control-Allow-Methods: 'GET,POST,PUT,DELETE';   // 默认允许get/post

  Access-Control-Allow-Headers:'xxx';   // 允许你自己加的头来通信

    *option(预检请求)——浏览器向服务器发起的OPTIONS预检请求,如果服务器不满足条件,则拒绝ajax请求。触发点:1.非简单请求方式(get/post之外)2. 加入了自定义的头;3. 当content-type是非键值对application/json;

三、代理

原理:通过node服务器加载本页面,再通过node服务器访问其它服务器

proxy原理:服务器本身不受所谓浏览器同源策略的影响

    下载依赖包:npm i request -S

    前端:请求node服务器的接口

    服务器:

        http.createServer((req, res) => {

            //1. 创建一个客户端对象,执行url

            var x = request('http://api.douban.com/xxx/xx/x');

            //2. 把浏览器原本的请求信息通过管道流到新的请求对象中,并请求

            req.pipe(x);    // req => x

            //3. 把这次请求的响应通过管道流到页面的相应中

            x.pipe(res);    // x => res        

        })

四、使用工具

nginx代理

目录命令行启动:start nginx     //启动主体进程-》工作进程

配置文件:nginx.conf

    server {

        listen: 端口;

        location: 页面配置;

    }

    location /apis {

        //代理动作设置

    }

一些基本命令:

*关闭代理服务器:nginx -s stop

*重新加载:nginx -s reload

前端页面请求接口'/apis/接口' 与后台约定标记需要代理的接口

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

推荐阅读更多精彩内容