• 什么是跨域？什么是同源策略？如何解决Ajax跨域问题？什么是JSONP？JSONP怎么请求数据？什么是Proxy？Proxy怎么请求数据？

    跨域

    什么是跨域？

    跨域就是指浏览器不能执行其他网站的脚本。这是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制

    浏览器为了用户的信息安全，网页中有一个网络请求技术：AJAX 在网络请求时 请求的网址 和当前页面的网址不是同一台服务器就会被拒绝接受服务器发送的数据

    例如：a页面想获取b页面资源，如果a、b页面的协议或域名或端口或子域名不同，只要有其中一项不同，那么所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源

    注意：跨域限制访问，其实是浏览器的限制，这一点很重要

    什么是同源策略？

    同源策略：指协议，域名（ip），端口（port）三者都要相同代表同源，只要有其中一个不同就会产生跨域

    注意：网址中的pathname参数并不参与同源判断

    例如：

    同源

    https://www.baidu.com/index.html
    https://www.baidu.com/home

    异源（协议不一样）

    http://www.baidu.com/index.html

    https://www.baidu.com/ajax

    异源（端口(port)不一样）

    http://www.baidu.com/index.html

    http://www.baidu.cn/ajax

    异源（域名(IP)不一样）

    http://www.baidu.com/index.html

    http://www.sina.com/index.html

    同源

    这个虽然看着似乎不一样，但是经过DNS解析后，域名和IP就是一样的，所以也是同源的

    端口号随便写的
    baidu的DNS解析为 119.75.217.109:8080

    http://www.baidu.com/index.html
    http://119.75.217.109:8080/ajax

    如何解决Ajax跨域问题？

    我们只需要在头部加一行下列的代码，即可解决这个问题
    res.setHeader("Access-Control-Allow-Origin","*")

    router是自己封装的一个函数，用来做网络请求读取文件的，没有封装这种类似功能的函数就需要自己先去写一下，http网络请求，fs模块读取文件

    实例

    var router=require("./router.js")
router.get("/ajax1",function(req,res){
	res.setHeader("Access-Control-Allow-Origin","*")
	res.end('{"name":"karen",age:20}')
})

    • 1
    • 2
    • 3
    • 4
    • 5
    <body>
	<h1>成都</h1>
	<button onclick="fn()">跨域ajax请求</button>
	<script>
		function fn(){
			var xhr=new XMLHttpRequest()
			xhr.open("get","http://192.168.43.132:8080/ajax1")
			xhr.send()
			xhr.onreadystatechange=function(){
				if(xhr.readyState==4&&xhr.status==200){
					console.log(xhr.responseText)
				}
			}
		}			
	</script>
</body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    在这里插入图片描述

    什么是JSONP？

    JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题

    由于同源策略，一般来说位于非同一服务器的的网页是无法相互沟通的，而 HTML 的