实现跨域访问---同源策略、常见跨域方法

实现跨域访问

同源策略

为了保证用户数据安全防止恶意网站窃取数据

同源策略三个行为限制：

Cookie、LocalStorage、indexDB无法读取

DOM无法获取

AJAX请求不能发送

在安全的同时也有了许多的不方便

同源：协议相同、域名相同、端口号相同

域名

访问的url地址：网络协议+域名（IP地址）+端口号+资源路径

同源：网络协议相同、域名相同、端口号相同

不同源：任意一个不一样

域名不相同：完全跨域

域名相同，端口不同：跨子网
在这里插入图片描述

互联网默认规则：同源策略（不允许跨域访问）

常见跨域方法

html可跨域标签 < link >、< script>、< img>、< iframe> 这些标签就直接可以跨域就是说你只能引入其他不同源的网站url等因为他们都有一个属性src用于引入路径的

<!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>
    <img src="http://project_h.change.tm/uploads/200513/1589331065.png?x-oss-process=image/resize,m_fill,h_48" alt="">
</body>
</html>

JSONP是什么

用于解决主流浏览器的跨域问题

利用script元素的开发策略实现的解决跨域问题就是利用了script标签的src
在这里插入图片描述

$.getJSON()方法

jQuery中的$.getJSON()方法允许使用JSON形式的回调函数来加载其他网域的JSON数据

$.getJSON('http://127.0.0.1:8888?callback=?',function(data){
    
    
	consle.log(data);
})

注意：callback=?中的？是jQuery将他自动替换为正确的函数名（jQuery底端自动生成）这个生成的函数名是每次不一样的

html

<!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 src="jquery-1.12.4.js"></script>
<script>
    //在getJSON中  也是有回调函数的  只不过是个匿名函数  因为是匿名函数 所有 不能直接指定他的函数名  只能让jQuery自己生产
    $.getJSON('http://127.0.0.1:8888?callback=?',function(data){
     
     
        console.log(data)
    });
</script>
</html>

const http = require('http');
const hostname = '127.0.0.1';
const port = 8888;
const server = http.createServer((req,res) => {
    
    
    var url = req.url;
    var urlObj = require('url').parse(url);//解析发过来的请求  返回一个url对象
    var functionName = urlObj.query.split('&')[0].split('=')[1];//获得对象下的某有个属性   split字符串分割 分割方式是括号中传入的参数
    res.statusCode = 200;
    res.setHeader('Content-Type','text/plain');
    //因为用的$.getJSON 回调函数是个匿名函数 不知道他的函数名  
    //在req中会接收客户端所有的请求  这里面就会有jQuery自动生成的函数名

    res.end(functionName+'({"msg":"xxxxxxx"})');
});

server.listen(port,hostname,() => {
    
    
    console.log('servering....')
})