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

資訊專欄INFORMATION COLUMN

關(guān)于跨域

AlexTuan / 12962人閱讀

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

在使用Vue搭建的一個后端管理系統(tǒng)中，我使用axios請求本地的Node環(huán)境下的接口，但是請求失敗，然后我錯誤信息是：

大概意思就是不能訪問http://localhost:8080
我的Vue項目端口是http://localhost:8081，Node服務(wù)端運(yùn)行在http://localhost:8080端口上，也就是說因為請求端口和響應(yīng)端口不一致，所以請求失敗。
我也在網(wǎng)上查看了一些關(guān)于跨域出現(xiàn)的原因及解決的方法，并記錄下來。

為什么會有跨域 
跨域一句話的理解就是：服務(wù)端和請求端的地址不一樣。
什么是跨域

Ajax 的便利性大家都清楚，可以在不向服務(wù)器提交完整的頁面的情況下，實現(xiàn)局部更新頁面。但是瀏覽器處于對安全方面的考慮，不允許跨域調(diào)用其他頁面的對象。
其實這個也不能怪瀏覽器，假設(shè)誰都可以隨隨便便向你發(fā)送請求，那樣有很大的安全隱患。
根據(jù)瀏覽器的同源策略, 只有當(dāng)協(xié)議，域名，端口相同的時候才算是同源, 反之則均視為是一個跨域的請求.
也就是說我剛剛的Vue端口是8081，服務(wù)端端口是8080，端口不一樣，因為同源策略的存在 ，所有我的請求會失敗。

一個問題，當(dāng)找到了原因，這個問題就解決了一半了。
怎么解決跨域

下面就先介紹三種跨全域的方法：

JSONP

應(yīng)該是最常見解決跨域的方法了，
他為什么能解決跨域呢，是因為Web 頁面上調(diào)用 js 文件不受瀏覽器同源策略的影響，所以通過 Script 便簽可以進(jìn)行跨域的請求：

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

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

收到結(jié)果后因為是 script 標(biāo)簽，所以瀏覽器會當(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("啟動服務(wù)，監(jiān)聽 localhost:3000");

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

//index.html

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

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

這次前端啟動需要使用node-server來啟動，使用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è)置的頭部信息需要和前端請求的地址一致
res.end(JSON.stringify(data));
//返回data
}).listen(3000, "127.0.0.1");

console.log("啟動服務(wù)，監(jiān)聽 127.0.0.1:3000");

使用命令node server.js啟動；

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

JSONP只支持GET請求，CORS支持所有類型的HTTP請求。JSONP的優(yōu)勢在于支持老式瀏覽器，以及可以向不支持CORS的網(wǎng)站請求數(shù)據(jù)。

Server Proxy

服務(wù)器代理，顧名思義，當(dāng)你需要有跨域的請求操作時發(fā)送請求給后端，讓后端幫你代為請求，然后最后將獲取的結(jié)果發(fā)送給你。

假設(shè)有這樣的一個場景，你的頁面需要獲取?CNode：Node.js專業(yè)中文社區(qū)?論壇上一些數(shù)據(jù)，如通過?https://cnodejs.org/api/v1/topics，當(dā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);
//核對請求路由是否一致
if(path === "topics"){
    https.get("https://cnodejs.org/api/v1/topics", (resp)=>{
        //https代發(fā)請求
        let data="";
        resp.on("data", chunk=>{
            data+= chunk
        });
        resp.on("end", ()=>{
            res.writeHead(
                200,
                {"Content-Type": "application/json; charset=utf-8"}
            );
            res.end(data);
            //返回數(shù)據(jù)
        })
    })
}

}).listen(3000, "127.0.0.1");

console.log("啟動服務(wù)，監(jiān)聽 127.0.0.1:3000");

前端代碼：

這樣就成功了

總結(jié)

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

JSONP

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

CORS

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

Server Proxy

優(yōu)點是前端正常發(fā)送ajax請求，缺點是后端會二次請求。

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

參考資料：

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

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

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

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

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

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

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

相關(guān)文章

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

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

    Yangyang 評論0 收藏0

  • 關(guān)于跨域

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

    CoreDump 評論0 收藏0

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

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

    neu 評論0 收藏0

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

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

    timger 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<