国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

關(guān)于跨域

AlexTuan / 12950人閱讀

摘要：服務(wù)端接收到請(qǐng)求后，通過(guò)該參數(shù)獲得回調(diào)函數(shù)名，并將數(shù)據(jù)放在參數(shù)中將其返回收到結(jié)果后因?yàn)槭菢?biāo)簽，所以瀏覽器會(huì)當(dāng)做是腳本進(jìn)行運(yùn)行，從而達(dá)到跨域獲取數(shù)據(jù)的目的。

在使用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ì)有跨域 
跨域一句話(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)求：

首先前端先設(shè)置好回調(diào)函數(shù)，并將其作為 url 的參數(shù)。

服務(wù)端接收到請(qǐng)求后，通過(guò)該參數(shù)獲得回調(diào)函數(shù)名，并將數(shù)據(jù)放在參數(shù)中將其返回

收到結(jié)果后因?yàn)槭?script 標(biāo)簽，所以瀏覽器會(huì)當(dāng)做是3腳本進(jìn)行運(yùn)行，從而達(dá)到跨域獲取數(shù)據(jù)的目的。

我的前端是index.html，后端是server.js
后端邏輯：

//server.js
const url = require("url");
const http = require("http");

http.createServer((req, res)=>{
const data = {
    x: 10//返回的數(shù)據(jù)
};
const callback = url.parse(req.url, true).query.callback;
res.writeHead(200);
res.end(`${callback}(${JSON.stringify(data)})`);
//執(zhí)行回調(diào)函數(shù)，返回data
}).listen(3000, "localhost");

console.log("啟動(dòng)服務(wù)，監(jiān)聽(tīng) localhost:3000");

然后使用node server.js運(yùn)行
前端：

//index.html

之后打開(kāi)index.html;就可以在控制臺(tái)看到返回的數(shù)據(jù)了：

至此，通過(guò) JSONP 跨域獲取數(shù)據(jù)已經(jīng)成功了，jsonp這種方法跨域，他的兼容性很好，可以在古老的瀏覽器中國(guó)使用，因?yàn)檫@種方法是利用了

這次前端啟動(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"http://返回的數(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");

使用命令node server.js啟動(dòng)；

CORS與JSONP的使用目的相同，但是比JSONP更強(qiáng)大。

JSONP只支持GET請(qǐng)求，CORS支持所有類(lèi)型的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專(zhuān)業(yè)中文社區(qū)?論壇上一些數(shù)據(jù)，如通過(guò)?https://cnodejs.org/api/v1/topics，當(dāng)時(shí)因?yàn)椴煌颍阅憧梢詫⒄?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");

前端代碼：

這樣就成功了

總結(jié)

常用的跨域方式基本就是這三種：

JSONP

優(yōu)點(diǎn)是可以兼容老瀏覽器，缺點(diǎn)是只能發(fā)送GET請(qǐng)求

CORS

優(yōu)點(diǎn)簡(jiǎn)單方便，支持post請(qǐng)求，缺點(diǎn)是需要后端的配合,不支持老版瀏覽器。。

Server Proxy

優(yōu)點(diǎn)是前端正常發(fā)送ajax請(qǐng)求，缺點(diǎn)是后端會(huì)二次請(qǐng)求。

其他的跨域方式還有：location.hash、window.name、postMessage等方式，有時(shí)間也可以了解一下。

參考資料：

跨域資源共享 CORS 詳解[阮一峰的博客]：http://www.ruanyifeng.com/blo...

關(guān)于跨域，你想知道的全在這里：https://zhuanlan.zhihu.com/p/...

不要再問(wèn)我跨域的問(wèn)題了[sf]：https://segmentfault.com/a/11...

關(guān)于跨域,以及跨域的幾種方式[cnblog]：https://www.cnblogs.com/chens...

瀏覽器的同源策略[MDN]:https://developer.mozilla.org...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/102557.html

相關(guān)文章

  • 20K前端大佬面試(關(guān)于如何回答ajax跨域問(wèn)題)

    摘要：在接觸前端開(kāi)發(fā)起，跨域這個(gè)詞就一直以很高的頻率在我們學(xué)習(xí)工作中重復(fù)出現(xiàn)，最近在工作中遇到了跨域的相關(guān)問(wèn)題，這里我把它總結(jié)記錄一下。 在接觸前端開(kāi)發(fā)起，跨域這個(gè)詞就一直以很高的頻率在我們學(xué)習(xí)工作中重復(fù)出現(xiàn)，最近在工作中遇到了跨域的相關(guān)問(wèn)題，這里我把它總結(jié)記錄一下。關(guān)于跨域，有N種類(lèi)型，現(xiàn)在我只專(zhuān)注于ajax請(qǐng)求跨域(ajax跨域只是屬于瀏覽器同源策略中的一部分,其它的這里不做介紹)，內(nèi)容...

    Yangyang 評(píng)論0 收藏0

  • 關(guān)于跨域

    摘要：經(jīng)歷了幾場(chǎng)筆試面試，屢次被問(wèn)到關(guān)于如何實(shí)現(xiàn)跨域。轉(zhuǎn)自個(gè)人博客關(guān)于跨域什么是跨域一般來(lái)說(shuō)，如果你在開(kāi)發(fā)中需要進(jìn)行跨域操作從一個(gè)非同源網(wǎng)站發(fā)送請(qǐng)求獲取數(shù)據(jù)，一般而言，你在瀏覽器控制臺(tái)看到的結(jié)果為同源策略說(shuō)到跨域就不得不提同源策略。 前言 轉(zhuǎn)眼就是秋招季啦。經(jīng)歷了幾場(chǎng)筆試面試，屢次被問(wèn)到關(guān)于如何實(shí)現(xiàn)跨域。老實(shí)說(shuō)，之前都是紙上談兵，也沒(méi)有項(xiàng)目需要跨域，甚至覺(jué)得這個(gè)東西沒(méi)什么意義。直到今天項(xiàng)目中...

    CoreDump 評(píng)論0 收藏0

  • 關(guān)于跨域踩的坑，瀏覽器 status code為200，但實(shí)際上是跨域了

    摘要：背景后端使用并更改本地文件，起本地服務(wù)。使用調(diào)用后端接口，要求為格式，并要求在里加一些內(nèi)容。借用凝雨關(guān)于跨域踩坑經(jīng)驗(yàn)總結(jié) 背景 后端使用Nginx并更改本地host文件，起本地服務(wù)。將aaa.bbbb.com代理至本地IP地址（10.26.36.156）。使用$.ajax調(diào)用后端restful接口，要求content-type為application/json格式，并要求在reques...

    neu 評(píng)論0 收藏0

  • 關(guān)于vue-resource在dev環(huán)境下跨域問(wèn)題的解決方法

    摘要：跨域問(wèn)題相信跨域問(wèn)題是每個(gè)前端在請(qǐng)求中都會(huì)遇到的問(wèn)題因?yàn)闉g覽器的同源策略的限制所以是不支持跨域的當(dāng)然當(dāng)后臺(tái)在沒(méi)有完成搭建的時(shí)候這時(shí)候我們需要使用到模擬數(shù)據(jù)的時(shí)候這時(shí)候很多的就會(huì)出現(xiàn)跨域問(wèn)題在中當(dāng)然這個(gè)問(wèn)題也不例外如下所以在此我也就整理出了 跨域問(wèn)題 相信跨域問(wèn)題是每個(gè)前端在ajax請(qǐng)求中都會(huì)遇到的問(wèn)題,因?yàn)闉g覽器的同源策略的限制,所以ajax是不支持跨域的,當(dāng)然當(dāng)后臺(tái)在沒(méi)有完成搭建的...

    timger 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<