面试--跨域

davidac 发布于2019-08-20 19:01 / 1560人阅读

摘要：跨域的解决方法使用使用跨域请求资源共享是跨域资源请求机制，它要求当前服务器存放资源在响应的报头中添加标签从而指定当前服务器可以被跨域访问服务器客户端在前端页面会显示但是默认的只支持和请求。

同源策略

之所以出现跨域就是因为有同源的限制
同协议同域名同端口在能获取资源在同源策略下域名A下可以访问域名B下的脚本 css 和图片但是A不能向B发起Ajax请求。

跨域的解决方法 使用CORS

使用CORS（跨域请求资源共享Cross-Origin Resource Sharing）是跨域资源请求机制，它要求当前服务器（存放资源）在响应的报头中添加 Access-Control-Allow-Origin标签从而指定当前服务器可以被跨域访问
res.setHeader("Access-Control-Allow-Origin","*");
服务器

var http=require("http");
http.createServer(function (req,res) {
    res.setHeader("Access-Control-Allow-Origin","*");
    res.end("OK");
}).listen(1234);

客户端

  $.ajax({url:"http://127.0.0.1:1234/",success:function (data) {
         $("div").text(data)
     }})

在前端页面会显示 OK
但是默认的cors只支持get和post请求。
关于 cors的详细理解可以查看我的而另一篇文章 https://segmentfault.com/a/11...

Html5的解决方案-Cross-document messaging

使用postMessage（发送数据）方法和onMessage(接收数据) 事件来传送不同域之间的通信

子页面

 var ifr=window.parent;
    var targeOrigin="http://localhost:63342/reactWork";
    ifr.postMessage("asa1111",targeOrigin);

父页面

实现了子页面向父页面发送消息ifr.postMessage()
在父页面接收消息 window.addEventListener("message",function(){})

Html5的解决方案-WebSocket

WebSocket protocol 是h5的新协议实现了浏览器与服务器的双工通信，同时允许跨域通信
下面是WebSocket同新的例子




    
    
   
    




sjaisja

客户端的代码

var WebSocketServer = require("ws").Server,
    wss = new WebSocketServer({ port: 8181 });
      wss.on("connection", function (ws) {
          console.log("开始连接")
          ws.on("message", function (message) {
              console.log(111)
              ws.send(message)
          })
      });

nodejs服务器端的代码实现了浏览器和服务器的等位通信

JSONP

主要是利用 Script标签不受同源限制的特性，向跨域服务器请求发挥一段JSON数据

常规前后端会约定好某个JSON 请求的callBack包裹起来。进而方便服务器区分收到的请求，也方便客户端区分收到的响应。

客户端

服务器

var http=require("http");
var urllib=require("url");
var data={"name":"111","addr":"222"};
http.createServer(function (req,res) {
    res.writeHead(200,{"Content-type":"text/plain"});
    var params=urllib.parse(req.url,true);
    if(params.query&¶ms.query.callback){
        console.log(params.query,params.query.callback)
        var str=params.query.callback+"("+JSON.stringify(data)+")";
        console.log(str)
        res.end(str);
    }else{
        res.end(JSON.stringify(data));
    }
}).listen(1234)

云服务器私有云端跨域跨域 cdn跨域 SONP跨域

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85039.html

2018年腾讯前端一面总结（面向2019届学生）

摘要：前言腾讯一面，相比阿里一面来说，腾讯一面先给打电话预定时间，这也给了我们这些面试者去准备的时间。其实闭包也就是指有权访问另一个函数作用域的函数而已。常用的创建闭包的方法就是在函数内部创建另一个函数。前言腾讯一面，相比阿里一面来说，腾讯一面先给打电话预定时间，这也给了我们这些面试者去准备的时间。但是也正是因为这种确定性，也有在等待电话的时候的心情的忐忑。背景我是一名大三学生，大一...

Kosmos 2019-08-22 15:17 评论0 收藏0
一篇文章搞明白CORS跨域

摘要：跨域实在是面试官一个人的利器。首先，什么是是一个标准，全称是跨域资源共享。它的值是一个布尔值，表示是否允许发送。设为，即表示服务器明确许可，可以包含在请求中，一起发给服务器。面试问到数据交互的时候，经常会问跨域如何处理。大部分人都会回答JSONP，然后面试官紧接着就会问：JSONP缺点是什么啊？这个时候坑就来了，如果面试者说它支持GET方式，然后面试官就会追问，那如果POST方式发送...

tanglijun 2019-08-23 13:42 评论0 收藏0
前端面试题-浏览器/服务端/网络

摘要：同源策略是什么跨域通信同源两个文档同源需满足协议相同域名相同端口相同跨域通信进行操作通信时如果目标与当前窗口不满足同源条件，浏览器为了安全会阻止跨域操作。同源策略是什么？ javascript跨域通信同源：两个文档同源需满足协议相同域名相同端口相同跨域通信：js进行DOM操作、通信时如果目标与当前窗口不满足同源条件，浏览器为了安全会阻止跨域操作。跨域通信通常有以下方法 ...

jsdt 2019-08-23 15:35 评论0 收藏0
前端秋招面试总结

摘要：前言秋招宣告结束，面试了接近家公司，有幸拿到，感谢这段时间一起找工作面试的朋友和陪伴我的人。一定要提前准备好，不然面试官叫你说遇到的难点，或者直接问问题时可能会懵逼。前言秋招宣告结束，面试了接近20家公司，有幸拿到offer，感谢这段时间一起找工作面试的朋友和陪伴我的人。这是一段难忘的经历，相信不亚于当年的高考吧，也许现在想起来高考不算什么，也许只有经历过秋招的人才懂得找工作的艰辛...

Gu_Yan 2019-08-02 12:04 评论0 收藏0