JS不可缺少--跨域

瀏覽器基于安全（用戶隱私）考慮闽巩，不允許不同域名的網(wǎng)站之間互相調(diào)用ajax，只是不允許ajax担汤，其他的還是允許的涎跨。但是js.css也可以默認是阻止的。

同源策略(Same origin Policy)

瀏覽器出于安全方面的考慮崭歧，只允許與本域下的接口交互隅很。不同源的客戶端腳本在沒有明確授權(quán)的情況下，不能讀寫對方的資源率碾。

本域指的是叔营？
1. 同協(xié)議：如都是http或者https
2. 同域名：如都是http://jirengu.com/a 和http://jirengu.com/b
3. 同端口：如都是80端口（默認是80端口）
如：

http://jirengu.com/a/b.js 和 http://jirengu.com/index.php (同源)

不同源的例子：

http://jirengu.com/main.js 和 https://jirengu.com/a.php (協(xié)議不同)
 http://jirengu.com/main.js 和 http://bbs.jirengu.com/a.php (域名不同，域名必須完全相同才可以)
http://jiengu.com/main.js 和 http://jirengu.com:8080/a.php (端口不同,第一個是80)

**需要注意的是: 對于當前頁面來說頁面存放的 JS 文件的域不重要所宰，重要的是加載該 JS 頁面所在什么域 **
如果發(fā)的請求的域名和當前頁面的域名是相同的审编，那么請求是可以被瀏覽器接受的，是瀏覽器的操作歧匈，換句話說請求發(fā)出去之后垒酬，返回的響應瀏覽器是否愿意接受，這是瀏覽器的安全策略。
瀏覽器基于用戶隱私的角度考慮勘究，不允許不同域名的網(wǎng)站之間互相調(diào)用ajax矮湘。
（其他的默認情況是不阻止的）
頁面向接口發(fā)送請求的時候，必須保證當前頁面的URL和接口的URL是同源的口糕。

什么是跨域

跨域就是當一個資源從與該資源的本身所在的服務器不同的協(xié)議缅阳、域名或者端口請求一個資源時，資源會發(fā)起一個跨域的HTTP請求景描。如http:www.baidu.com頁面請求http://www.reibang.com的資源

跨域的幾種方法

JSON
CORS
JSONP和CPRS本質(zhì)：不同域下的接口獲取數(shù)據(jù)十办。
圖像Ping：
動態(tài)創(chuàng)建圖像經(jīng)常用于圖像Ping，圖像Ping是與服務器進行簡單超棺、單向的跨域通信的一種方式向族。請求的數(shù)據(jù)是通過查詢字符串的形式發(fā)送的，而響應可以是任意內(nèi)容棠绘，但通常是素圖或204響應件相，通過圖像Ping，瀏覽器得不到任何具體的數(shù)據(jù)氧苍，但是可以通過監(jiān)聽load和error事件夜矗，知道響應是什么時候收到的。
Comet：
Comet指的是一種更高級的Ajax技術(shù)让虐，是一種從服務器向頁面推送數(shù)據(jù)的技術(shù)紊撕，Comet能夠讓信息近乎實時地被推送到頁面上。有兩種實現(xiàn)Comet的方式：
- 長輪詢：頁面發(fā)起一個到服務器的請求赡突，然后服務器一致保持著連接打開对扶，直到有數(shù)據(jù)可發(fā)送，發(fā)送完數(shù)據(jù)之后麸俘，瀏覽器關(guān)閉連接辩稽，隨即又發(fā)起一個到服務器的新請求，這一過程在頁面打開期間一直持續(xù)不斷从媚。
- HTTP流：在頁面的整個生命周期內(nèi)只使用一個HTTP連接逞泄，瀏覽器向服務器發(fā)送一個請求，而服務器保持連接打開拜效，然后周期性的向瀏覽器發(fā)送數(shù)據(jù)喷众。
服務器發(fā)送事件（SSE:Server-Sent Events）
SSE用于創(chuàng)建到服務器的單向連接，服務器通過這個連接可以發(fā)送任意數(shù)量的數(shù)據(jù)紧憾。具有兩種實現(xiàn)方式：
- SSE API
- 事件流
Web Sockets
Web Sockets是一種與服務器進行全雙工到千，雙向通信的信道。Web Sockets不使用HTTP協(xié)議赴穗，而使用一種自定義的協(xié)議憔四。（ws://或者wss://）這種協(xié)議專門為快速傳輸小數(shù)據(jù)設計膀息。

JSONP

定義：
全稱JSON with Padding（填充式JSON或參數(shù)式JSON），可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問的問題了赵。JSONP有兩部分組成：回調(diào)函數(shù)和數(shù)據(jù)潜支。回調(diào)函數(shù)是當響應到來時應該在頁面中調(diào)用的函數(shù)柿汛，回調(diào)函數(shù)的名字一般是在請求中指定冗酿，而數(shù)據(jù)就是傳入回調(diào)函數(shù)中的JSON數(shù)據(jù)。
<script>的src可以引用任何網(wǎng)站的文件络断，當它引入一個接口的時候裁替，接口返回的數(shù)據(jù)一般都是JSON格式的數(shù)據(jù)，這個數(shù)據(jù)是游離在頁面上的貌笨，無法進行操作弱判，所以直接用<script>標簽引入是不可以的。
html中script標簽可以引入其他域下的js躁绸，比如引入線上的jquery庫裕循。利用這個特性臣嚣，可實現(xiàn)跨域訪問接口净刮。需要后端支持

echo $cb . '&&' . $cb . '(' . json_encode($ret) . ')';

定義數(shù)據(jù)處理函數(shù)_fun
創(chuàng)建script標簽，src的地址執(zhí)行后端接口硅则，最后加個參數(shù)callback=_fun
服務端在收到請求后淹父，解析參數(shù)，計算返還數(shù)據(jù)怎虫，輸出 fun(data) 字符串暑认。
fun(data)會放到script標簽做為js執(zhí)行。此時會調(diào)用fun函數(shù)大审，將data做為參數(shù)蘸际。

原理：
利用<script>標簽沒有跨域限制的“漏洞”來達到與第三方通信的目的。
當需要通訊時徒扶，本站腳本會創(chuàng)建一個<script>元素粮彤，地址指向第三方的API地址，如<script src = "http://weather.com.cn?city=suzhou&callback=showWeather"></script>,
并提供一個回調(diào)函數(shù)來接受數(shù)據(jù)（函數(shù)名可約定或通過地址參數(shù)傳遞）姜骡。第三方產(chǎn)生的響應為JSON格式的數(shù)據(jù)包裝（所以稱之為jsonp导坟，即json padding），如weather({"suzhou":"rain"})圈澈，這樣瀏覽器會調(diào)用回調(diào)函數(shù)weather惫周，并傳遞解析后的js對象作為參數(shù)，本站腳本可在callback函數(shù)里處理所傳入的數(shù)據(jù)康栈。用戶只需要在加載之前定義好showWeather這個全局函數(shù)递递，在函數(shù)內(nèi)處理參數(shù)即可喷橙。

<script>
    function showWeather(ret){
        console.log(ret)
    }
</script>
<script src = "http://weather.com.cn?city=suzhou&callback=showWeather"></script>

http://weather.com.cn?city=suzhou接口要支持callback。

舉例：
HTML代碼部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跨域</title>
    <script src = "index1.js"></script>
</head>
<body>  
</body>
</html>

js部分登舞，文件名index1.js

//創(chuàng)建script標簽重慢，設置屬性，將script標簽添加到head中逊躁，
//至此似踱，head標簽中有兩個script標簽
function loadScript(url) {
    var script = document.createElement('script')
    script.src = url
    script.type = "text/javascript"
    var head = document.querySelector('head')
    head.appendChild(script)
}
//設置回調(diào)函數(shù)的函數(shù)聲明
function jsonpCallback(data) {
    //把JSON數(shù)據(jù)序列化為JS對象
    console.log(JSON.stringify(data))
}
//JSONP請求
loadScript('http://127.0.0.1:3000?callback=jsonpCallback')

后端邏輯

var url = require('url') // 獲取url模塊
var http = require('http')// 獲取http模塊
http.createServer(function(req,res){//創(chuàng)建服務器，并監(jiān)聽127.0.0.1的3000端口
    //設置數(shù)據(jù)
    var data = {
        name: "lilili"
    }
    //url.parse()方法將一個url字符串解析為URL對象稽煤，
    //.query方法獲取的是不含問號的參數(shù)鍵值對轧简，
    //callback為鍵名察藐，不固定，只要前后端約定好即可。
    //所以callbackName為回調(diào)函數(shù)的名字譬猫，即index1.js文件中的jsonpCallback
    var callbackName = url.parse(req.url,true).query.callback
    //設置響應頭為200染服，即OK狀態(tài)，一般要提前約定好，不能亂寫。
    res.writeHead(200)
    //res.end()即發(fā)送后端相應的結(jié)果${callbackName}為函數(shù)名梢灭，
    //${JSON.stringify(data)}表示JSON字符串格式的實際參數(shù)库快，合起來為函數(shù)調(diào)用闽铐。
    res.end(`${callbackName}(${JSON.stringify(data)})`)
}).listen(3000,'127.0.0.1')
//打印這句話只是方便在終端查看代碼是否生效
console.log('啟動服務器，監(jiān)聽 127.0.0.1:3000')

前端先設置好回調(diào)函數(shù)五督，并將函數(shù)名作為url的參數(shù)碌燕，將此url插入到新創(chuàng)建的script標簽的src屬性中慈鸠，并將此script標簽添加到頁面的head中娃肿。
服務器端接受到的請求后咕缎，通過該參數(shù)獲得回調(diào)函數(shù)名為jsonpCallback珠十，并將js格式的數(shù)據(jù)作為函數(shù)調(diào)用的參數(shù)返回。
收到結(jié)果后因為是script標簽凭豪，所以瀏覽器會當做腳本運行焙蹭，從而達到跨域獲取數(shù)據(jù)的目的。

驗證
1. 通過node index2.js在終端中啟動服務器嫂伞，監(jiān)聽端口3000孔厉，這件便建立了服務器
  
  啟動服務器.PNG
  
  訪問端口3000.PNG
2. 我們通過端口號的不同來模擬跨域的場景，打開另一個終端窗口帖努，在頁面目錄下輸入http-server
  
  輸入命令.PNG
3. 通過端口8080來訪問剛才的頁面烟馅，相當于開啟兩個監(jiān)聽不同端口的http服務器，通過頁面中的請求來模擬跨域的場景然磷。打開瀏覽器郑趁，訪問http://127.0.0.1:8080就可以看到從http://127.0.0.1:3000獲取到的數(shù)據(jù)了
  
  打開8080端口.PNG
4. 至此，通過JSONP跨域獲取數(shù)據(jù)已經(jīng)成功了姿搜。
總結(jié)：
JSONP是通過script標簽加載數(shù)據(jù)的方式去獲取數(shù)據(jù)當做JS代碼來執(zhí)行寡润，提前在頁面上聲明一個函數(shù)，函數(shù)名通過接口傳參的方式傳給后臺舅柜，后臺解析到函數(shù)后在原始數(shù)據(jù)上包裹這個函數(shù)名梭纹，發(fā)送給前端。換句話說致份，JSONP需要對應的后端接口的配合才能實現(xiàn)变抽。
JSONP優(yōu)點：
- 它不像XMLHttpRequest對象實現(xiàn)Ajax請求那樣受到同源策略的限制；
- 兼容性好氮块，在老的瀏覽器也能很好的運行绍载；
- 不需要XMLHttpRequest或Active X的支持；并且在請求完畢后可以通過調(diào)用callback的方式回傳結(jié)果滔蝉。
JSONP缺點：
- 只支持GET請求击儡；
- 歷史原因遺留的bug，注定被淘汰蝠引；
- 只支持跨域HTTP請求這種情況阳谍，不能解決不同域的兩個頁面或iframe之間進行數(shù)據(jù)通信的問題；
- 容易遭受XXS攻擊螃概，因為我們拿到的是對方接口的數(shù)據(jù)作為js執(zhí)行矫夯，如果得到的是一個很危險的js，獲取了用戶信息和cookie吊洼，這時執(zhí)行了js就會出現(xiàn)安全問題训貌。

CORS

CORS 全稱是跨域資源共享（Cross-Origin Resource Sharing），是一種 ajax 跨域請求資源的方式融蹂，支持現(xiàn)代瀏覽器旺订，IE支持10以上弄企。實現(xiàn)方式很簡單，當你使用 XMLHttpRequest 發(fā)送請求時区拳，瀏覽器發(fā)現(xiàn)該請求不符合同源策略拘领，會給該請求加一個請求頭：Origin，后臺進行一系列處理樱调，如果確定接受請求則在返回結(jié)果中加入一個響應頭：Access-Control-Allow-Origin; 瀏覽器判斷該響應頭中是否包含 Origin 的值约素，如果有則瀏覽器會處理響應，我們就可以拿到響應數(shù)據(jù)笆凌，如果不包含瀏覽器直接駁回圣猎，這時我們無法拿到響應數(shù)據(jù)。所以 CORS 的表象是讓你覺得它與同源的 ajax 請求沒啥區(qū)別乞而，代碼完全一樣送悔。
瀏覽器將CORS請求分為兩類：簡單請求和非簡單請求

簡單請求

請求方法是以下三種方法之一
- HEAD
- GET
- POST
HTTP的頭信息不超出以下幾種字段
- Accept
- Accept-Language
- Content-Language
- Last-Event-ID
- Content-Type：只限于三個值application/x-www-form-urlencoded、multipart/form-data爪模、text/plain
對于簡單請求欠啤，瀏覽器直接發(fā)出CORS請求，具體來說屋灌，就是在頭信息之中洁段，增加一個Origin字段。
示例：

GET /cors HTTP/1.1
Origin:http://api.bobo.com
Host:api.alice.com
Accept-Languague:en-us
Connection:keep-alive
User-Agent:Mozilla/5.0...

上面的頭信息中共郭，Origin字段用來說明本次請求來自哪個源（協(xié)議+域名+端口）祠丝，服務器根據(jù)這個值決定是否同意這次請求。
如果Origin指定的源除嘹，不在許可范圍內(nèi)写半，服務器會返回一個正常的HTTP響應。瀏覽器發(fā)現(xiàn)憾赁，這個回應的頭信息沒有包含Access-Control-Allow-Origin字段污朽，就知道出錯了，從而拋出一個錯誤龙考，被XMLHttpRequest的onerror回調(diào)函數(shù)捕獲。注意矾睦。這種錯誤無法通過狀態(tài)碼識別晦款，因為HTTP回應的狀態(tài)碼有可能是200。
如果Origin指定的域名在許可的范圍內(nèi)枚冗，服務器返回的響應缓溅，會多出幾個頭信息字段。

Access-Control-Allow-Origin:http://api.bob.com
Access-Control-Allow-Credentials:true
Access-Control-Expose-Headers:FooBar
Content-Type:text/html;charset=utf-8

上面的頭信息之中赁温，有三個與CORS請求相關(guān)的字段坛怪，都以Access-Control-開頭
(1)Access-Control-Allow-Origin
該字段是必須的淤齐，它的值要么是請求時Origin字段的值，要么是一個*,表示接受任意域名的請求
(2)Access-Control-Allow-Credentials
該字段可選袜匿，它的值是一個布爾值更啄，表示是否允許發(fā)送Cookie，默認情況下居灯，Cookie不包括在CORS請求之中祭务。設為true，即表示服務器明確許可怪嫌，Cookie可以包含在請求中义锥，一般發(fā)給服務器。這個值也只能設為true岩灭，如果服務器不要瀏覽器發(fā)送Cookie拌倍，刪除該字段即可。
(3)Access-Control-Expose-Headers
該字段可選噪径，CORS請求時贰拿，XMLHttpRequest對象的getResponseHeader()方法只能拿到6個基本字段：Cache-Control、Content-Language熄云、Content-type膨更、Exoires、Last-Modifred、Pragma。如果想拿到掐字段驶臊，就必須在Access-Control-Expose-Headers里面指定座掘，上面的例子指定getResponseHeder('FooBar')可以返回FooBar字段的值。

非簡單請求

凡是不同時滿足簡單請求的兩大條件的請求就是非簡單請求少孝。
非簡單請求指對服務器有特殊要求的請求，比如請求方法是PUT或者DELETE,或者Content-Type字段的類型是application/json。
非簡單請求的CORS請求敞贡，會在正式通信之前，增加一次HTTP查詢請求摄职，成為“預檢”請求（preflight）誊役。
瀏覽器先詢問服務器，當前網(wǎng)頁所在的域名是否在服務器的許可名單之中谷市，以及可以使用哪些HTTP動詞和頭信息字段蛔垢。只有得到肯定答復，瀏覽器才會發(fā)出正式的XMLHttpRequest請求迫悠，否則就會報錯鹏漆。
下面一段瀏覽器的JavaScript腳本

var url = 'http://api.alice.com/cors'
var xhr = new XMLHttpRequest()
xhr.open('PUT',url,true)
xhr.setRequestHeader('X-Custom-Header','value')
xhr.send()

上面代碼中，HTTP請求的方法是PUT，并且發(fā)送一個自定義頭信息X-Custom-Header.
瀏覽器發(fā)現(xiàn)艺玲，這是一個非簡單請求括蝠，就會自動發(fā)出一個“預檢”請求，要求服務器確認可以這樣請求饭聚，下面是這個預檢請求的HTTP頭信息忌警。

OPTIONS /cors HTTP/1.1
Origin: http://api.bob.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

“預檢”請求用的請求方法是OPTIONS，表示這個請求是用來詢問的若治，頭信息里面慨蓝，關(guān)鍵字段是Origin，表示請求來自哪個源端幼。除了Origin字段礼烈，“預檢”請求的頭信息包括兩個特殊字段：
(1)Access-Control-Request-Method
該字段是必須的，用來列出瀏覽器的CORS請求會用到哪些HTTP方法婆跑，上列是PUT此熬。
(2)Access-Control-Request-Headers
該字段是一個逗號分隔的字符串，指定瀏覽器CORS請求會額外發(fā)送的頭信息字段滑进，上列是X-Custom-Header犀忱。
服務器收到“預檢”請求以后，檢查了Origin扶关、Access-Control-Request-Method和Access-Control-Request-Headers字段以后阴汇，確認允許跨源請求，就可以做出回應节槐。

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain

上面的HTTP回應中搀庶，關(guān)鍵的是Access-Control-Allow-Origin字段，表示http://api.bob.com可以請求的數(shù)據(jù)（該字段也可以設為*铜异，表示同意任意跨源請求哥倔。）
如果瀏覽器否定了"預檢"請求，會返回一個正常的HTTP回應揍庄，但是沒有任何CORS相關(guān)的頭信息字段咆蒿。這時，瀏覽器就會認定蚂子，服務器不同意預檢請求沃测，因此觸發(fā)一個錯誤，被XMLHttpRequest對象的onerror回調(diào)函數(shù)捕獲缆镣⊙客唬控制臺會打印出如下的報錯信息。

XMLHttpRequest cannot load http://api.alice.com.
Origin http://api.bob.com is not allowed by Access-Control-Allow-Origin.

服務器回應的其他CORS相關(guān)字段如下董瞻。

Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 1728000

（1）Access-Control-Allow-Methods
該字段必需，它的值是逗號分隔的一個字符串，表明服務器支持的所有跨域請求的方法钠糊。注意挟秤，返回的是所有支持的方法，而不單是瀏覽器請求的那個方法抄伍。這是為了避免多次"預檢"請求艘刚。
（2）Access-Control-Allow-Headers
如果瀏覽器請求包括Access-Control-Request-Headers字段，則Access-Control-Allow-Headers字段是必需的截珍。它也是一個逗號分隔的字符串攀甚，表明服務器支持的所有頭信息字段，不限于瀏覽器在"預檢"中請求的字段岗喉。
（3）Access-Control-Allow-Credentials
該字段與簡單請求時的含義相同秋度。
（4）Access-Control-Max-Age
該字段可選，用來指定本次預檢請求的有效期钱床，單位為秒荚斯。上面結(jié)果中，有效期是20天（1728000秒）查牌，即允許緩存該條回應1728000秒（即20天）事期，在此期間，不用發(fā)出另一條預檢請求纸颜。
一旦服務器通過了"預檢"請求兽泣，以后每次瀏覽器正常的CORS請求，就都跟簡單請求一樣胁孙，會有一個Origin頭信息字段唠倦。服務器的回應，也都會有一個Access-Control-Allow-Origin頭信息字段浊洞。
下面是"預檢"請求之后牵敷，瀏覽器的正常CORS請求。

PUT /cors HTTP/1.1
Origin: http://api.bob.com
Host: api.alice.com
X-Custom-Header: value
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

上面頭信息的Origin字段是瀏覽器自動添加的法希。下面是服務器正常的回應枷餐。

Access-Control-Allow-Origin: http://api.bob.com
Content-Type: text/html; charset=utf-8

上面頭信息中，Access-Control-Allow-Origin字段是每次回應都必定包含的苫亦。

CORS代碼示例如下：

html部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跨域</title>
    <script src = "index1.js"></script>
</head>
<body>
    
</body>
</html>

JS部分

var xhr = new XMLHttpRequest() //1
xhr.open('GET','HTTP://127.0.0.1:3000',true)//2
xhr.onload =function(){
    cosole.log(xhr.responseText)
}//4 因為onload是異步執(zhí)行的毛肋，所以后執(zhí)行 
xhr.send()//3

這似乎和一次正常的異步ajax請求沒什么區(qū)別，關(guān)鍵是在服務端接收到請求后的處理：
后端邏輯

var http = require('http')//獲取http 模塊
http.createServer(function(req,res){//創(chuàng)建服務器并監(jiān)聽127.0.0.1的3000端口
    //設置響應頭為200屋剑，即OK狀態(tài)润匙，一般也要提前約定好，不能亂寫唉匾，設置允許訪問的白名單孕讳。
    res.writeHead(200,{
        'Access-Control-Allow-Origin':'http://127.0.0.1:8080'
    })
    //res,send()即發(fā)送后端相應的結(jié)果匠楚。
    res.send('hello,dolby')

}).listen(3000,'127.0.0.1')
console.log('啟動服務器，監(jiān)聽 127.0.0.1:3000')

關(guān)鍵在于設置響應頭中的Access-Control-Allow-Origin,該值要與請求頭中Origin一致才能生效厂财，否則將跨域失敗芋簿。
res.setHeader('Access-Control-Allow-Origin','http://localhost:8080')
主要觀察Response Headers中的Access-Control-Allow-Origin和Request Headers的Origin。兩者進行比較璃饱，如果一樣与斤，瀏覽器則可以請求成功，不一樣荚恶，則失敗撩穿。

捕獲.PNG

與JSONP一樣，開啟兩個服務器谒撼，并打開瀏覽器

兩個服務器.PNG

成功的關(guān)鍵在于Access-Control-Allow-Origin是否包含請求頁面的域名食寡，如果不包含的話，瀏覽器將認為這是一次失敗的異步請求嗤栓，將會調(diào)用xhr.onerror中的函數(shù)冻河。

如果
res.setHeaders('Access-Control-Allow-Origin'.'*')，則表示任何人都可以使用這個數(shù)據(jù)茉帅。

CORS的優(yōu)缺點：

優(yōu)點：
- 使用簡單方便叨叙，更為安全
- 支持POST請求方式
- 精確控制資源的訪問權(quán)限
- 客戶端無須增加額外的代碼
缺點：
- CORS僅兼容IE10以上。

Server Proxy服務器

需要跨域的請求操作時發(fā)送請求給后端堪澎，讓后端幫你代為請求擂错，然后將獲取的結(jié)果發(fā)送給你。
假設你的頁面需要獲取假設你的頁面需要獲取 CNode：Node.js專業(yè)中文社區(qū) 論壇上一些數(shù)據(jù)樱蛤，如通過 https://cnodejs.org/api/v1/topics钮呀，因為不同域，所以你可以請求后端讓其代為轉(zhuǎn)發(fā)請求

const url = require('url');
const http = require('http');
const https = require('https');
const server = http.createServer((req, res) => {
    const path = url.parse(req.url).path.slice(1);
    if(path === 'topics') {
    https.get('https://cnodejs.org/api/v1/topics', (resp) => {
        let data = "";
        resp.on('data', chunk => {
        data += chunk;
        });
        resp.on('end', () => {
        res.writeHead(200, {
            'Content-Type': 'application/json; charset=utf-8'
        });
        res.end(data);
        });
    })      
    }
}).listen(3000, '127.0.0.1');
console.log('啟動服務昨凡，監(jiān)聽 127.0.0.1:3000');

通過代碼你可以看出爽醋，當你訪問http://127.0.0.1:3000時，服務器收到請求便脊，會代你發(fā)送請求https://cnodejs.org/api/v1/topics蚂四，最后將獲取到的數(shù)據(jù)發(fā)送給瀏覽器。

啟動服務器

啟動服務器.PNG
打開瀏覽器訪問http://localhost:3000/topics就可以看到:

瀏覽結(jié)果.PNG

跨域成功哪痰！

最后編輯于：2019.07.23 10:03:13

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末遂赠，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子晌杰，更是在濱河造成了極大的恐慌跷睦，老刑警劉巖，帶你破解...
沈念sama閱讀 211,194評論 6贊 490
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件肋演，死亡現(xiàn)場離奇詭異抑诸，居然都是意外死亡烂琴，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 90,058評論 2贊 385
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門哼鬓，熙熙樓的掌柜王于貴愁眉苦臉地迎上來监右，“玉大人边灭，你說我怎么就攤上這事异希。” “怎么了绒瘦？”我有些...
開封第一講書人閱讀 156,780評論 0贊 346
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵称簿，是天一觀的道長。經(jīng)常有香客問我惰帽，道長憨降，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 56,388評論 1贊 283
?港島之戀（遺憾婚禮）
正文為了忘掉前任该酗，我火速辦了婚禮授药，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘呜魄。我一直安慰自己悔叽，他們只是感情好，可當我...
茶點故事閱讀 65,430評論 5贊 384
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布爵嗅。她就那樣靜靜地躺著娇澎，像睡著了一般。火紅的嫁衣襯著肌膚如雪睹晒。梳的紋絲不亂的頭發(fā)上趟庄，一...
開封第一講書人閱讀 49,764評論 1贊 290
城市分裂傳說
那天，我揣著相機與錄音伪很，去河邊找鬼戚啥。笑死，一個胖子當著我的面吹牛锉试，可吹牛的內(nèi)容都是我干的猫十。我是一名探鬼主播，決...
沈念sama閱讀 38,907評論 3贊 406
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼键痛，長吁一口氣：“原來是場噩夢啊……” “哼炫彩！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起絮短，我...
開封第一講書人閱讀 37,679評論 0贊 266
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤江兢，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后丁频，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體杉允，經(jīng)...
沈念sama閱讀 44,122評論 1贊 303
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡邑贴，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 36,459評論 2贊 325
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了叔磷。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片拢驾。...
茶點故事閱讀 38,605評論 1贊 340
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖改基，靈堂內(nèi)的尸體忽然破棺而出繁疤，到底是詐尸還是另有隱情，我是刑警寧澤秕狰，帶...
沈念sama閱讀 34,270評論 4贊 329
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布稠腊，位于F島的核電站，受9級特大地震影響鸣哀，放射性物質(zhì)發(fā)生泄漏架忌。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點故事閱讀 39,867評論 3贊 312
男人毒藥：我在死后第九天來索命
文/蒙蒙一我衬、第九天我趴在偏房一處隱蔽的房頂上張望叹放。院中可真熱鬧，春花似錦挠羔、人聲如沸井仰。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,734評論 0贊 21
一樁弒父案褥赊，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽糕档。三九已至，卻和暖如春拌喉，著一層夾襖步出監(jiān)牢的瞬間速那，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 31,961評論 1贊 265
情欲美人皮
我被黑心中介騙來泰國打工尿背，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留端仰，地道東北人。一個月前我還...
沈念sama閱讀 46,297評論 2贊 360
代替公主和親
正文我出身青樓田藐，卻偏偏與公主長得像荔烧，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子汽久，可洞房花燭夜當晚...
茶點故事閱讀 43,472評論 2贊 348