关于跨域
在使用Vue搭建的一個(gè)后端管理系統(tǒng)中，我使用axios請(qǐng)求本地的Node環(huán)境下的接口，但是請(qǐng)求失敗，然后我錯(cuò)誤信息是：
大概意思就是不能訪問(wèn)http://localhost:8080 我的Vue項(xiàng)目端口是http://localhost:8081，Node服務(wù)端運(yùn)行在http://localhost:8080端口上，也就是說(shuō)因?yàn)檎?qǐng)求端口和響應(yīng)端口不一致，所以請(qǐng)求失敗。 我也在網(wǎng)上查看了一些關(guān)于跨域出現(xiàn)的原因及解決的方法，并記錄下來(lái)。為什么會(huì)有跨域
跨域一句話的理解就是：服務(wù)端和請(qǐng)求端的地址不一樣。
什么是跨域
Ajax 的便利性大家都清楚，可以在不向服務(wù)器提交完整的頁(yè)面的情況下，實(shí)現(xiàn)局部更新頁(yè)面。但是瀏覽器處于對(duì)安全方面的考慮，不允許跨域調(diào)用其他頁(yè)面的對(duì)象。
其實(shí)這個(gè)也不能怪瀏覽器，假設(shè)誰(shuí)都可以隨隨便便向你發(fā)送請(qǐng)求，那樣有很大的安全隱患。
根據(jù)瀏覽器的同源策略, 只有當(dāng)協(xié)議，域名，端口相同的時(shí)候才算是同源, 反之則均視為是一個(gè)跨域的請(qǐng)求.
也就是說(shuō)我剛剛的Vue端口是8081，服務(wù)端端口是8080，端口不一樣，因?yàn)橥床呗缘拇嬖?，所有我的請(qǐng)求會(huì)失敗。
一個(gè)問(wèn)題，當(dāng)找到了原因，這個(gè)問(wèn)題就解決了一半了。
怎么解決跨域
下面就先介紹三種跨全域的方法：
JSONP
應(yīng)該是最常見(jiàn)解決跨域的方法了， 他為什么能解決跨域呢，是因?yàn)閃eb 頁(yè)面上調(diào)用 js 文件不受瀏覽器同源策略的影響，所以通過(guò) Script 便簽可以進(jìn)行跨域的請(qǐng)求：
然后使用node server.js運(yùn)行 前端：
//index.html <body><script>function jsonpCallback(data) {console.log('獲得 X 數(shù)據(jù):' + data.x);}</script><script src="http://localhost:3000?callback=jsonpCallback"></script> </body> 復(fù)制代碼之后打開(kāi)index.html;就可以在控制臺(tái)看到返回的數(shù)據(jù)了：
至此，通過(guò) JSONP 跨域獲取數(shù)據(jù)已經(jīng)成功了，jsonp這種方法跨域，他的兼容性很好，可以在古老的瀏覽器中國(guó)使用，因?yàn)檫@種方法是利用了<script>標(biāo)簽的特殊性，所有只支持GET請(qǐng)求。
CORS
CORS 是一個(gè) W3C 標(biāo)準(zhǔn)，全稱是"跨域資源共享"（Cross-origin resource sharing）它允許瀏覽器向跨源服務(wù)器，發(fā)出 XMLHttpRequest 請(qǐng)求，從而克服了 ajax 只能同源使用的限制。
CORS 需要瀏覽器和服務(wù)器同時(shí)支持才可以生效，對(duì)于開(kāi)發(fā)者來(lái)說(shuō)，CORS 通信與同源的 ajax 通信沒(méi)有差別，代碼完全一樣。瀏覽器一旦發(fā)現(xiàn) ajax 請(qǐng)求跨源，就會(huì)自動(dòng)添加一些附加的頭信息，有時(shí)還會(huì)多出一次附加的請(qǐng)求，但用戶不會(huì)有感覺(jué)。
因此，實(shí)現(xiàn) CORS 通信的關(guān)鍵是服務(wù)器。只要服務(wù)器實(shí)現(xiàn)了 CORS 接口，就可以跨源通信。
前端：
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script> $.ajax({url:"http://127.0.0.1:3000",success:function(res){var res = JSON.parse(res);$('body').text(res.data);console.log(res.data);} }); </script> 復(fù)制代碼這次前端啟動(dòng)需要使用node-server來(lái)啟動(dòng)，使用npm install node-server下載，然后當(dāng)前目錄下使用node-server就可以了 后端：
const http = require('http');http.createServer((req, res)=>{ const data = {'data': 'Hello world'//返回的數(shù)據(jù) }; res.writeHead(200, {'Access-Control-Allow-Origin': 'http://127.0.0.1:8080'}); //設(shè)置的頭部信息需要和前端請(qǐng)求的地址一致 res.end(JSON.stringify(data)); //返回data }).listen(3000, '127.0.0.1');console.log('啟動(dòng)服務(wù)，監(jiān)聽(tīng) 127.0.0.1:3000'); 復(fù)制代碼使用命令node server.js啟動(dòng)；
CORS與JSONP的使用目的相同，但是比JSONP更強(qiáng)大。
JSONP只支持GET請(qǐng)求，CORS支持所有類型的HTTP請(qǐng)求。JSONP的優(yōu)勢(shì)在于支持老式瀏覽器，以及可以向不支持CORS的網(wǎng)站請(qǐng)求數(shù)據(jù)。
Server Proxy
服務(wù)器代理，顧名思義，當(dāng)你需要有跨域的請(qǐng)求操作時(shí)發(fā)送請(qǐng)求給后端，讓后端幫你代為請(qǐng)求，然后最后將獲取的結(jié)果發(fā)送給你。
假設(shè)有這樣的一個(gè)場(chǎng)景，你的頁(yè)面需要獲取?CNode：Node.js專業(yè)中文社區(qū)?論壇上一些數(shù)據(jù)，如通過(guò)?cnodejs.org/api/v1/topi…，當(dāng)時(shí)因?yàn)椴煌?#xff0c;所以你可以將請(qǐng)求后端，讓其對(duì)該請(qǐng)求代為轉(zhuǎn)發(fā)。
后端代碼如下：
const url = require('url'); const http = require('http'); const https = require('https');http.createServer((req, res)=>{ const path = url.parse(req.url).path.slice(1); //核對(duì)請(qǐng)求路由是否一致 if(path === 'topics'){https.get('https://cnodejs.org/api/v1/topics', (resp)=>{//https代發(fā)請(qǐng)求let data='';resp.on('data', chunk=>{data+= chunk});resp.on('end', ()=>{res.writeHead(200,{'Content-Type': 'application/json; charset=utf-8'});res.end(data);//返回?cái)?shù)據(jù)})}) }}).listen(3000, '127.0.0.1');console.log('啟動(dòng)服務(wù)，監(jiān)聽(tīng) 127.0.0.1:3000'); 復(fù)制代碼前端代碼：
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script> $.ajax({url:"https://cnodejs.org/api/v1/topics",success:function(res){$('body').text(JSON.stringify(res));console.log(res);} }); </script> 復(fù)制代碼這樣就成功了
總結(jié)
常用的跨域方式基本就是這三種：
其他的跨域方式還有：location.hash、window.name、postMessage等方式，有時(shí)間也可以了解一下。
參考資料：
- 跨域資源共享 CORS 詳解[阮一峰的博客]：www.ruanyifeng.com/blog/2016/0…
- 關(guān)于跨域，你想知道的全在這里：zhuanlan.zhihu.com/p/25778815
- 不要再問(wèn)我跨域的問(wèn)題了[sf]：segmentfault.com/a/119000001…
- 關(guān)于跨域,以及跨域的幾種方式[cnblog]：www.cnblogs.com/chenshishuo…
- 瀏覽器的同源策略[MDN]:developer.mozilla.org/zh-CN/docs/…
轉(zhuǎn)載于:https://juejin.im/post/5c8b67f6f265da2dd2191308
總結(jié)
- 上一篇： 十分钟熟练Dockerfile指令
- 下一篇： 快速开发框架资料