文档章节

跨域

o
 osc_1ee7cxmx
发布于 2018/08/06 15:19
字数 1551
阅读 0
收藏 0

同源策略(Same origin Policy)

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

本域指的是

如:

不同源的例子:

对于当前页面来说页面存放的 JS 文件的域不重要,重要的是加载该 JS 页面所在什么域

报错范例

使用 nodejs ,参考下面代码

//server.js 服务端 代码
var http = require('http')
var fs = require('fs') var url= require('url') http.createServer(function(req,res){ var pathObj = url.parse(req.url,true) console.log(pathObj) switch(pathObj.pathname){ case '/getWeather': res.setHeader('Access-Control-Allow-Origin','http://a.com:9003') //CORS跨域 res.setHeader('content-Type','text/json; charset=utf-8') if(pathObj.query.city === 'beijing'){ ret = { city:'beijing', weather: '晴天' } }else{ ret = { city: pathObj.query.city, weather: '不知道' } } res.end(JSON.stringify(ret)) break; case '/user/123': res.end( fs.readFileSync(__dirname + '/static/user') ) break; default: res.end( fs.readFileSync(__dirname + '/static' + pathObj.pathname) ) } }).listen(9003) console.log('visit http://localhost:9003/index.html') 
<!--index.html-->
<h1>hello weather</h1> <script> var xhr = new XMLHttpRequest() xhr.open('GET', 'http://127.0.0.1:9003/getWeather?city=beijing',true) xhr.send() xhr.onload = function(){ console.log(JSON.parse(xhr.responseText)) } </script> 



使用Hostbuddy添加127.0.0.1的新hosts地址a.com和b.com

 

使用a.com:9003/index.html获取数据正常 

 

使用b.com:9003/getWeather?city=beijing获取数据报错

 

 

跨域的几种方法

JSONP

HTML 中 script 标签可以加载其他域下的 JS,比如我们经常引入一个其他域下线上cdn的jQuery。那如何利用这个特性实现从其他域下获取数据呢?

可以先这样试试:

<script src="http://api.evenyao.com/weather.php"></script> 

这时候会向天气接口发送请求获取数据,获取数据后做为 js 来执行。 但这里有个问题, 数据是 JSON 格式的数据,直接作为 JS 运行的话我如何去得到这个数据来操作呢?

这样试试:

<script src="http://api.evenyao.com/weather.php?callback=showData"></script> 

这个请求到达后端后,后端会去解析callback这个参数获取到字符串showData,在发送数据做如下处理:

之前后端返回数据: {"city": "hangzhou", "weather": "晴天"} 现在后端返回数据: showData({"city": "hangzhou", "weather": "晴天"}) 前端script标签在加载数据后会把 「showData({“city”: “hangzhou”, “weather”: “晴天”})」做为 js 来执行,这实际上就是调用showData这个函数,同时参数是 {“city”: “hangzhou”, “weather”: “晴天”}。 用户只需要在加载提前在页面定义好showData这个全局函数,在函数内部处理参数即可。

<script>
function showData(ret){ console.log(ret); } </script> <script src="http://api.evenyao.com/weather.php?callback=showData"></script> 

JSONP(JSON with padding),总结:

JSONP是通过 script 标签加载数据的方式去获取数据当做 JS 代码来执行 提前在页面上声明一个函数,函数名通过接口传参的方式传给后台,后台解析到函数名后在原始数据上「包裹」这个函数名,发送给前端。换句话说,JSONP 需要对应接口的后端的配合才能实现。

server.js

var http = require('http')
var fs = require('fs') var path = require('path') var url = require('url') http.createServer(function(req,res){ var pathObj = url.parse(req.url,true) switch (pathObj.pathname) { case '/getNews': var news = [ "保罗乔治钓鱼竞标赛圆满结束:感谢你们所有人的参赛", "威斯布鲁克妻子透露将自己与丈夫的第二个孩子", "[翻译团]防守将会使雷霆在2018-19赛季更上一层楼" ] res.setHeader('content-Type','text/json; charset=utf-8') if(pathObj.query.callback){ res.end(pathObj.query.callback + '(' + JSON.stringify(news) + ')') }else{ res.end(JSON.stringify(news)) } break; default: fs.readFile(path.join(__dirname,pathObj.pathname),function(e,data){ if(e){ res.writeHead(404,'not found') res.end('<h1>404 Nof Found</h1>') }else{ res.end(data) } }) } }).listen(9004) console.log('visit http://localhost:9004/index.html') 

index.html

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>JSONP 跨域</title> </head> <body> <div class="container"> <ul class="news"> </ul> <button class="show">show news</button> </div> <script> function $(selector){ return document.querySelector(selector) } $('.show').addEventListener('click',function(){ var script = document.createElement('script') script.src = 'http://127.0.0.1:9004/getNews?callback=appendHtml' document.head.appendChild(script) //添加script document.head.removeChild(script) //移除script }) function appendHtml(news){ var html = '' for (var i=0; i < news.length; i++ ){ html += '<li>' + news[i] + '</li>' } console.log(html) $('.news').innerHTML = html } </script> </body> </html> 

打开终端,输入 node server.js ,浏览器打开 http://localhost:9004/index.html

CORS

CORS 全称是跨域资源共享(Cross-Origin Resource Sharing),是一种 ajax 跨域请求资源的方式,支持现代浏览器,IE支持10以上。 实现方式很简单,当你使用 XMLHttpRequest 发送请求时,浏览器发现该请求不符合同源策略,会给该请求加一个请求头:Origin,后台进行一系列处理,如果确定接受请求则在返回结果中加入一个响应头:Access-Control-Allow-Origin; 浏览器判断该相应头中是否包含 Origin 的值,如果有则浏览器会处理响应,我们就可以拿到响应数据,如果不包含浏览器直接驳回,这时我们无法拿到响应数据。所以 CORS 的表象是让你觉得它与同源的 ajax 无区别,代码完全一样。

server.js

var http = require('http')
var fs = require('fs') var path = require('path') var url = require('url') http.createServer(function(req,res){ var pathObj = url.parse(req.url,true) switch (pathObj.pathname) { case '/getNews': var news = [ "保罗乔治钓鱼竞标赛圆满结束:感谢你们所有人的参赛", "威斯布鲁克妻子透露将自己与丈夫的第二个孩子", "[翻译团]防守将会使雷霆在2018-19赛季更上一层楼" ] res.setHeader('Access-Control-Allow-Origin','http://localhost:9005') //CORS跨域 res.setHeader('content-Type','text/json; charset=utf-8') res.end(JSON.stringify(news)) break; default: fs.readFile(path.join(__dirname,pathObj.pathname),function(e,data){ if(e){ res.writeHead(404,'not found') res.end('<h1>404 Nof Found</h1>') }else{ res.end(data) } }) } }).listen(9005) console.log('visit http://localhost:9005/index.html') 

index.html

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CORS 跨域</title> </head> <body> <div class="container"> <ul class="news"> </ul> <button class="show">show news</button> </div> <script> function $(selector){ return document.querySelector(selector) } $('.show').addEventListener('click',function(){ var xhr = new XMLHttpRequest() xhr.open('GET','http://127.0.0.1:9005/getNews',true) xhr.send() xhr.onload = function(){ appendHtml(JSON.parse(xhr.responseText)) } }) function appendHtml(news){ var html = '' for (var i=0; i < news.length; i++ ){ html += '<li>' + news[i] + '</li>' } console.log(html) $('.news').innerHTML = html } </script> </body> </html> 

启动终端,执行 node server.js ,浏览器打开 http://localhost:9005/index.html ,查看效果和网络请求

参考

前端常见跨域解决方案(全)

node-server

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

pycurl libcurl link-time ssl backend (nss)

pip uninstall pycurlecho 'pycurl==7.19.5.1 --global-option="--with-nss"' > requires.pypip install -r requires.py...

小红手
24分钟前
17
0
计算机网络性能衡量

1、速率 单位时间(s)内传输信息(bit)量 单位:KB/s, MB/s, Gb/s K = 10^3 ,M = 10^6, G=10^9 一般表示的是理想的传输速率 2、带宽 计算机网络中的带宽和通信等领域的带宽概念不一样,计算机网...

osc_np3y0rbq
24分钟前
3
0
互联网掀起农家乐,巨头上演AI掘金战

配图来自Canva **前有网易、阿里AI养猪,后有腾讯AI养鹅,互联网大佬们纷纷玩起了“农家乐”,互联网的生意在尖端技术的引领之下频频跨界,巨头之间的较量也从线上延伸至线下。**自古“民以食...

osc_5cok9i01
26分钟前
9
0
原来!我在4年前就开始体验雾游戏了!

前有云游戏后有雾游戏,游戏的方式看来起来越来越多种多样。那么“震撼业界”的雾游戏到底是什么来头?它依靠什么改变游戏界?它的原理又是什么? 本月月初,著名的日本游戏杂志《Fami通》表...

osc_j34n26zn
27分钟前
11
0
活动预告|田溯宁与你相约GSMA Thrive·万物生晖,分享5G风口下的创新与投资洞察

在万物互联的时代背景下,5G+AI+IoT的技术变革与融合,正在引发一场深刻的全产业创新与变革。5G技术创新、行业应用及投资机遇已成为科技行业所瞩目的焦点。 6月30日,宽带资本董事长田溯宁将...

osc_0qnrwmy3
28分钟前
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部