亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

關于跨域

AlexTuan / 13057人閱讀

摘要：服務端接收到請求后，通過該參數獲得回調函數名，并將數據放在參數中將其返回收到結果后因為是標簽，所以瀏覽器會當做是腳本進行運行，從而達到跨域獲取數據的目的。

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

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

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

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

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

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

JSONP

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

首先前端先設置好回調函數，并將其作為 url 的參數。

服務端接收到請求后，通過該參數獲得回調函數名，并將數據放在參數中將其返回

收到結果后因為是 script 標簽，所以瀏覽器會當做是3腳本進行運行，從而達到跨域獲取數據的目的。

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

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

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

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

然后使用node server.js運行
前端：

//index.html

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

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

這次前端啟動需要使用node-server來啟動，使用npm install node-server下載，然后當前目錄下使用node-server就可以了
后端：

const http = require("http");

http.createServer((req, res)=>{
const data = {
    "data": "Hello world"http://返回的數據
};
res.writeHead(200, {"Access-Control-Allow-Origin": "http://127.0.0.1:8080"});
//設置的頭部信息需要和前端請求的地址一致
res.end(JSON.stringify(data));
//返回data
}).listen(3000, "127.0.0.1");

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

使用命令node server.js啟動；

CORS與JSONP的使用目的相同，但是比JSONP更強大。

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

Server Proxy

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

假設有這樣的一個場景，你的頁面需要獲取?CNode：Node.js專業(yè)中文社區(qū)?論壇上一些數據，如通過?https://cnodejs.org/api/v1/topics，當時因為不同域，所以你可以將請求后端，讓其對該請求代為轉發(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);
            //返回數據
        })
    })
}

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

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

前端代碼：

這樣就成功了

總結

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

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...

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

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

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

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

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

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/102557.html

相關文章

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

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

    Yangyang 評論0 收藏0

  • 關于跨域

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

    CoreDump 評論0 收藏0

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

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

    neu 評論0 收藏0

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

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

    timger 評論0 收藏0

發(fā)表評論

0條評論

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