同源策略和跨域

什么是浏览器的同源策略？

ajax请求时，浏览器要求当前网页（以及请求的资源）和server必须同缘以保证安全，即ajax只能访问自己的资源

同源： ajax请求的url的 协议，域名，端口必须一致

对于一段JavaScript脚本来说，其“源”与它存储的地址无关，而取决于脚本被加载的页面。比如我们在某个页面中通过。

<script>标签引用了来源于不同地方（“http://www.artech.com/”和“http://www.jinnan.me/”）的两个JavaScript脚本，它们均与当前页面同源。

可以跨域的地址：

图片的地址：直接跨域，可以利用img统计打点，在src的地址页面中写上各种需要的参数；

css/js的地址

js的地址

跨域

所有的跨域都需要服务器端的允许和配合，如github的部分API允许跨域请求。

修改浏览器安全设置

JSONP

服务端可以返回HTML/Js格式的以动态拼接的数据。

<script>标签可以绕过跨域

服务端允许返回数据，拼接<script src='https://example.js?para'>可以借此获取数据

原生的jsonp（demo并非真跨域，懒得设置端口）

页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
<script>
    windows.abc = function(data){
        console.log(data);
    }
</script>
<script src="jsonp.js?callback=abc"></script>
</html>

jsonp.js

abc({x:1, y:2})；

 

一般用Jquery实现跨域过程：只能是默认的get方法不是post

$.ajax({
    url: 'https://cross-origin.com/x-origion.json',
    dataType: 'jsonp',
    jsonpCallback: 'callback', // 一般可以取代success
    success: data=>{
        console.log(data);
    }     
});

function callback(data){
    console.log(data);
}

 

CORS跨域

在服务端设置响应头http header，使之 Access-Control-Allow-Origin, Access-Control-Allow-Headers, Access-Control-Allow-Methods等属性，使之允许ajax请求

 

还可以通过 iframe+window/location的属性进行跨域，或者反向代理，暂不研究

 

posted @ 2021-01-03 17:42  SvenWayne  阅读(92)  评论(0)    收藏  举报