跨域????如何解决

Posted mr-bear

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了跨域????如何解决相关的知识,希望对你有一定的参考价值。

1.什么是跨域

    当一个请求url的协议、域名、端口三者之间任意一个与当前的url不同即为跨域
    ex:
        http//www....  和https//www....就是协议上的跨域(http/https)
        www.baidu.com 和www.test.com  就是主域名不同(baidu/test)
        www.test.com  和blog.test.com 就是子域名不同(WWW/blog)
        www.test.com:8080 和www.test.com:7000 端口上的跨域(8080/7000)

2.为什么浏览器会禁止跨域

    因为跨域的访问会带来许多安全性上的问题,cookie一般都用于状态控制,存储登录的信息,如果允许跨域,那么别的网站用一段脚本就可以轻松获取你的cookie数据,并且冒充身份去登录网站(这不一下就被盗号了吗),存在极大的安全隐患,所以,现在的浏览器都采用同源策略

3.非同源限制

1.无法读取非同源网页的Cookie、Localstorage和indexedDB
2.无法接触非同源网页的DOM节点
3.无法向非同源地址发送ajax请求
    注:有三个标签允许跨域加载资源
        1.<img src='xxx'>
        2.<link href='xxx'>
        3.<script src='xxx'>

4.如何解决跨域访问问题

1.document.domain
    两个页面可以通过设置相同的document.domain,因为浏览器是通过document.domain属性来检查两个网页是否同源
    使用:两个网页都设置document.domain='test.com'  #不是固定的,自己想名字噢
    缺点:这方式的局限性比较大,因为只能用于二级域名相同的情况下,比如说,a.test.com 和 b.test.com 适用该方式
2.JSONP
    利用<script>元素的开放策略,向服务器请求 JSON 数据,服务器收到请求后,将数据放在一个指定名字的回调函数的参数位置传回来。
    与ajax的区别:
        JSONP和ajax相同,都是客户端向服务器端发送请求,从服务器端获取数据的方式。但ajax属于同源策略,JSONP属于非同源策略(跨域请求)
    优点:兼容性好
    缺点:只支持get,不支持post
    使用:
        1.声明一个回调函数,其函数名(如fn)当做参数值,要传递给跨域请求数据的服务器,函数形参为要获取目标数据(服务器返回的data)。
        2.创建一个<script>标签,把那个跨域的API数据接口地址,赋值给script的src,还要在这个地址中向服务器传递该函数名(可以通过问号传参:?callback=fn)。
        3.服务器接收到请求后,需要进行特殊的处理:把传递进来的函数名和它需要给你的数据拼接成一个字符串,例如:传递进去的函数名是fn,它准备好的数据是fn(["name":"jianshu"])。
        4.最后服务器把准备的数据通过HTTP协议返回给客户端,客户端再调用执行之前声明的回调函数(fn),对返回的数据进行操作。
        <script type="text/javascript"src="http://crossdomain.com/jsonServerResponse?jsonp=fn">         </script>
        <script type="text/javascript">
            function fn(data)
                //处理获得的数据
            
        </script>
    其中 fn 是客户端注册的回调的函数,目的获取跨域服务器上的json数据后,对数据进行在处理。
最后服务器返回给客户端数据的格式为:
    fn( msg:'this  is  json  data')
3.CORS
    CORS 是跨域资源分享(Cross-Origin Resource Sharing)的缩写。它是 W3C 标准,属于跨源 AJAX 请求的根本解决方法。整个CORS通信过程都是浏览器自动完成的,不需要用户参与,浏览器一旦发现AJAX请求跨源,会自动添加一些附加的头信息,有时还会多出一次附加的请求,用户不会有感觉,因此,实现CORS通信的关键是服务器,只要服务器实现了CORS接口,就可以跨源通信
    优点:功能更加强大支持各种HTTP Method
    缺点:兼容性不如JSONP
    使用:
1.前端代码(需要判断浏览器是否支持情况)

    function createCORSRequest(method, url) var xhr = new XMLHttpRequest();
  if ("withCredentials" in xhr) 
    // 此时即支持CORS的情况
    // 检查XMLHttpRequest对象是否有“withCredentials”属性
    // “withCredentials”仅存在于XMLHTTPRequest2对象里
    xhr.open(method, url, true);
   else if (typeof!= "undefined") 
    // 否则检查是否支持XDomainRequest,IE8和IE9支持
    // XDomainRequest仅存在于IE中,是IE用于支持CORS请求的方式
    xhr = new XDomainRequest();
    xhr.open(method, url);
   else 
    // 否则,浏览器不支持CORS
    xhr = null;
 
  
  return xhr;

 
var xhr = createCORSRequest('GET', url);
if (!xhr) 
  throw new Error('CORS not supported');


服务器:
    Apache需要使用mod_headers模块来激活HTTP头的设置,它默认是激活的。你只需要在Apache配置文件的<Directory>, <Location>, <Files>或<VirtualHost>的配置里加入以下内容即可
    Header set Access-Control-Allow-Origin *
4.跨文档通信 API:window.postMessage()
    调用postMessage方法实现父窗口http://test1.com向子窗口http://test2.com发消息(子窗口同样可以通过该方法发送消息给父窗口)
    // 父窗口打开一个子窗口
var openWindow = window.open('http://test2.com', 'title');
 
    // 父窗口向子窗口发消息(第一个参数代表发送的内容,第二个参数代表接收消息窗口的url)
openWindow.postMessage('Nice to meet you!', 'http://test2.com');
    
// 监听 message 消息
window.addEventListener('message', function (e) 
  console.log(e.source); // e.source 发送消息的窗口
  console.log(e.origin); // e.origin 消息发向的网址
  console.log(e.data);   // e.data   发送的消息
,false);
5.WebSocket
    Websocket是html5的一个持久化的协议,它实现了浏览器与服务器的全双工通信,同时也是跨域的一种解决方案。WebSocket和HTTP都是应用层协议,都基于 TCP 协议。但是 WebSocket 是一种双向通信协议,在建立连接之后,WebSocket 的 server 与 client 都能主动向对方发送或接收数据。同时,WebSocket 在建立连接时需要借助 HTTP 协议,连接建立好了之后 client 与 server 之间的双向通信就与 HTTP 无关了。

原生WebSocket API使用起来不太方便,我们使用Socket.io,它很好地封装了webSocket接口,提供了更简单、灵活的接口,也对不支持webSocket的浏览器提供了向下兼容。

1.前端代码
    <div>user input:<input type="text"></div>
<script src="./socket.io.js"></script>
<script> var socket = io('http://www.domain2.com:8080'); // 连接成功处理 
socket.on('connect', function () 
    // 监听服务端消息    
    socket.on('message', function (msg) 
        console.log('data from server: ---> ' + msg);
    );
// 监听服务端关闭     
    socket.on('disconnect', function () 
        console.log('Server socket has closed.');
    );
);
document.getElementsByTagName('input')[0].onblur = function () 
    socket.send(this.value);
; </script>

2.Nodejs socket后台:
var http = require('http');
var socket = require('socket.io');
// 启http服务
var server = http.createServer(function (req, res) 
    res.writeHead(200, 'Content-type': 'text/html');
    res.end();
);
server.listen('8080');
console.log('Server is running at port 8080...');
// 监听socket连接 
socket.listen(server).on('connection', function (client) 
    // 接收信息     
    client.on('message', function (msg) 
        client.send('hello:' + msg);
        console.log('data from client: ---> ' + msg);
    );
// 断开处理     
    client.on('disconnect', function () 
        console.log('Client socket has closed.');
    );
);

以上是关于跨域????如何解决的主要内容,如果未能解决你的问题,请参考以下文章

如何解决ajax跨域问题

如何解决ajax跨域问题

跨域怎么解决

如何解决ajax跨域问题

如何解决js跨域问题

springboot如何解决跨域问题?