1. 程式人生 > >跨域相關知識及實現跨域的方法

跨域相關知識及實現跨域的方法

對於跨域,可能對於不瞭解的有一定的難度,下面就和大家聊一下關於跨域的知識。
跨域瞭解一下?
其實跨域就是指一個域名的網頁請求其他域名網頁資源,但是瀏覽器不能執行其他網站的指令碼,根本原因是由於同源政策的限制(等一下再說同源政策),而同源政策是瀏覽器施加的安全限制。
同源政策?
同源策略/SOP(Same origin policy)是一種約定,由Netscape公司1995年引入瀏覽器,它是瀏覽器最核心也最基本的安全功能。所謂同源是指"協議+域名+"三者相同,即缺一不可。
假如沒有同源政策:
網站的cookie(包括隱私)可以隨意訪問,自己訪問一些支付寶等賬號資訊由於沒有退出而被其他人冒充,給自己造成很大的損失。

而同源政策可以限制Cookie、LocalStorage 和 IndexDB 無法讀取 或者 DOM 和 Js物件無法獲得以及 AJAX 請求不能傳送等。
下面來看一下所謂的“同源”:
http:www.example.com:8080/local/index.html
http: 就是指的協議 www.example.com : 域名 8080 就是埠了

來幾個判斷吧:
file:www.example.com:8080/local/index.html 不同源(協議不同)
http:example.com:8080/local/index.html 不同源(域名不同)
http:www.example.com:8000/local/index.html 不同源(埠不同)
http:www.example.com:8080/local2/index.html 同源

下面給大家介紹幾種跨域的方法:
1.jsonp跨域
這裡說一下:都是自己的例項:
在這裡插入圖片描述

在這裡插入圖片描述

jsonp跨域只能用get請求

2.xhr跨域

在這裡插入圖片描述

在這裡插入圖片描述

3.iframe跨域

在這裡插入圖片描述

在這裡插入圖片描述

4.http跨域
node.js 程式碼:

var http = require(‘http’)
var https = require(‘https’) //這兩個視介面選擇
web.get(’/weather’,function(req ,res){
https.get(‘https://www.apiopen.top/weatherApi?city=哈爾濱’,function(sres){
var resData = new Buffer(’’)
// 當接收資料的時候
sres.on(‘data’,function(d){
// 拼接資料
resData += d
})
sres.on(‘end’,function(){
// 將接收到的資料使用json解析出來
resData = JSON.parse(resData)
res.send(resData)
})
})
})
前端程式碼:

Document 跨域

在這裡插入圖片描述

以上就是我個人所掌握的跨域方法;當然還有很多種方法,還需要學習,請大家多多提建議批評!!!