JavaScript 同源策略以及跨域处理

最新推荐文章于 2022-12-18 22:25:43 发布

19133cxx

最新推荐文章于 2022-12-18 22:25:43 发布

阅读量130

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/u013165444/article/details/103892635

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

同源策略是浏览器决定是否接收跨域的内容。

浏览器出于安全方面的考虑，只允许在本域的接口下交互，不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源。

本域是指：同协议：hhtp 或https 同域名，同端口（80是http默认端口，即没有写端口就是80）

在浏览器中，当我们在地址栏输入域名回车后，浏览器会向DNS服务器发起域名解析请求，DNS服务器将域名解析成对应的公网IP后，将结果返回给浏览器，浏览器再通过这个IP访问网站对域名与ip的不同访问是跨域

对ip的访问和对域名的访问属于跨域访问

这是服务器的代码

var http=require('http')
var path=require('path')//文件路径
var fs=require('fs')
var url=require('url')
 function staticRoot(staticPath,req,res){
   var pathobj=url.parse(req.url,true);
   console.log(staticPath)

   var filepath=path.join(staticPath,pathobj.pathname);
   
   fs.readFile(filepath,'binary',function(err,fileContent){
   	if(err){
   		res.writeHead(404,'not found')
   		res.end('<h1>404 Not Found</h1>')
   	}else{
   		res.writeHead(200,'ok')
   		res.write(fileContent,'binary')
   		res.end()
   	}
   })

 }

var server=http.createServer(function(req,res){
	switch(req.url)
	{
		
		case '/getWeather':
            console.log('getWeather')
            res.end(JSON.stringify({a:1,b:2}))
        default:
            staticRoot(__dirname,req,res);//最终得到static的绝对路径
	}
})127.0.01
server.listen(8080)

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
    <h1>Hello World</h1>
    <script type="text/javascript">
    	var xhr=new XMLHttpRequest();   //这是客户端的请求，如果这里localhost改成 127.0.0.1的话，同源策略会进行拦截
    	xhr.open('GET','http://localhost:8080/getWeather',true)
    	xhr.send()
    	xhr.onload=function(){
    		console.log(xhr.responseText);
    	}
    </script>
</body>
</html>

跨域指绕过同源策略获取数据

Ajax 需要关心同源策略，但是script标签并不需要

JSONP实现方式：

客户端：

<script type="text/javascript">
       	 showData=function(data){
            var c=JSON.stringify(data);
            console.log(c)
       	 }
       </script>
       <script type="text/javascript" src="http://127.0.0.1:8080/getWeather?callback=showData">
    </script>

服务器：

var pathobj=url.parse(req.url,true)
	switch(pathobj.pathname)
	{
		case '/getWeather':
            if(pathobj.query.callback){
               console.log('YES')
               res.end(pathobj.query.callback+'('+JSON.stringify({a:1,b:2})+')' )
            }else{
                  res.end(JSON.stringify({a:1,b:2}))
            }   
         break;
        default:
            staticRoot(__dirname,req,res);//最终得到static的绝对路径
	}

cors：当浏览器检测到该请求不符合同源策略时，会给该请求加一个请求头：Origin，后台进行一系列处理，如果确定接受请求，则会在返回结果中加一个响应头Access-Control-Allow-Origin.浏览器比较Access-Control-Allow-Origin 与请求的Origin是否一样

res.setHeader('Access-Control-Allow-Origin','http://127.0.0.1:8080');

降域：

document.domain='jirengu.com'

19133cxx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 同源策略以及跨域处理

同源策略是浏览器决定是否接收跨域的内容。浏览器出于安全方面的考虑，只允许在本域的接口下交互，不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源。本域是指：同协议：hhtp 或https 同域名，同端口（80是http默认端口，即没有写端口就是80）在浏览器中，当我们在地址栏输入域名回车后，浏览器会向DNS服务器发起域名解析请求，DNS服务器将域名解析成对应的公网I...
复制链接

扫一扫