面试--跨域

2024年3月31日 84次阅读 来源: 丹丹赵

同源策略

之所以出现跨域就是因为有同源的限制
同协议 同域名 同端口 在能获取资源在同源策略下 域名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);

父页面

<iframe style="display: none" id="ifr" src="http://localhost:63342/reactWork/index2.html"></iframe>
<script type="text/javascript">
     window.addEventListener('message',function (event) {
         console.log(event)
         if(event.origin=='http://localhost:1234'){
             console.log(event.data)  //会输出event的数据
         }
     },false)
</script>

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

Html5的解决方案-WebSocket

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
   <script src="jquery.js"></script>
    <script src="socket.io-1.3.4.js"></script>
</head>
<link rel="stylesheet" href="style.css">
<body>

<h1>sjaisja</h1>
<button onclick=Send()>dadasds</button>
<input type="text" id="test1">
<script type="text/javascript">
    var ws=new WebSocket("ws://localhost:8181")
     ws.onopen=function () {
         console.log("Socket 打开")
     }
    ws.onmessage=function (msg) {
        $("h1").html(msg.data)
    }
     function Send() {
        ws.send($("#test1").val())
     }
</script>
</body>
</html>

客户端的代码

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包裹起来。进而方便服务器区分收到的请求，也方便客户端区分收到的响应。

客户端

<script type="text/javascript">
      $.ajax({
          url:"http://127.0.0.1:1234/",
          dataType:"jsonp",
          jsonCallback:'abc',
          success:function (data) {
              console.log(data)
          }
      })
</script>

服务器

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&&params.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)
    原文作者：丹丹赵
    原文地址: https://segmentfault.com/a/1190000010914507
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞