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

实现跨域访问

同源策略

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

同源策略三个行为限制：

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....')
})

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

[ecshop 经验 ]transport.js run error 68ecshop 小京东火狐提示同源策略和跨域访问 68ecshop
transport.js run error 68ecshop 小京东 transport.js run error 68ecshop 小京东火狐提示同源策略和跨域访问 cros access ...
websocket中发生数据丢失_tcp协议;websocket协议;同源策略和跨域
tcp协议为什么连接的时候是三次握手,关闭的时候却是四次握手? 答:因为当Server端收到Client端的SYN连接请求报文后,可以直接发送SYN+ACK报文.其中ACK报文是用来应答的,SYN报 ...
gorilla websocket无法跨域_聊聊浏览器同源策略与跨域方案详解
开发出高性能的 Web 应用固然重要,但安全问题也不容小觑.本文我们继续以 HTTP 为线索,展开来讲一讲浏览器安全相关的同源策略. 浏览器的同源策略(Same Origin Policy) 源(Or ...
Django - - 进阶 - - 同源策略和跨域解决方案
目录同源策略一个源的定义同源策略是什么举个例子 jQuery中getJSON方法 JSONP应用 1, 同源策略 1.1 一个源的定义如果两个页面的协议,端口(如果有指定)和域名都相同,则两 ...
服务器安全：浏览器同源策略与跨域请求、XSS攻击原理及防御策略、如何防御CSRF攻击
主要包括浏览器同源策略与跨域请求 XSS攻击原理及防御策略如何使用SpringSecurity防御CSRF攻击 CC/DDOS攻击与流量攻击什么是SSL TLS HTTPS? 一.浏览器的同源策 ...
ajax背景、ajax对象、ajax状态、ajax与http、ajax请求数据接口、同步与异步、ajax请求XML数据、封装ajax函数、artTemplate简介、同源策略和跨域请求、JSONP
AJAX简介: ajax背景: 1.AJAX(Asynchronous JavaScript And Xml)异步的 JavaScript 和 XML:ajax是浏览器提供的一套API,最早出现在谷歌 ...
同源策略和跨域解决方案
同源策略一个源的定义如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有相同的源. 举个例子: 下表给出了相对http://a.xyz.com/dir/page.html同源检测的示 ...
[CORS：跨域资源共享] 同源策略与JSONP
Web API普遍采用面向资源的REST架构,将浏览器最终执行上下文的JavaScript应用Web API消费者的重要组成部分."同源策略"限制了JavaScript的跨站点调用 ...
同源策略和跨域请求解决方案
一.一个源的定义如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有相同的源. 举个例子: 下表给出了相对http://a.xyz.com/dir/page.html同源检测的示例: ...

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

实现跨域访问

同源策略

域名

常见跨域方法

JSONP是什么

$.getJSON()方法

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

最新文章

热门文章

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

实现跨域访问

同源策略

域名

常见跨域方法

JSONP是什么

$.getJSON()方法

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

最新文章

热门文章

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

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