為什麼會產生跨域,以及解決跨域的方法

2021-10-05 21:51:38 字數 1669 閱讀 4526

答:因為瀏覽器的同源政策,就會產生跨域。比如說傳送的非同步請求是不同的兩個源,就比如是不同的的兩個埠或者不同的兩個協議或者不同的網域名稱。由於瀏覽器為了安全考慮,就會產生乙個同源政策,不是同乙個地方出來的是不允許進行互動的。

解決跨域的方法:第一種jsonp的方法。第二種使用cors解決跨域問題,即跨域資源共享,在後端設定響應頭部,加一句**:access-control-allow-origin:"*"或者允許互動的網域名稱。第三種使用vue,找到config檔案下->index.js檔案,修改propytable中的target的值,就可實現用前端解決跨域。第四種,使用**;第五種,使用postmessage

1、jsonp方法:

jsonp是一種借助於 script 標籤傳送跨域請求的技巧方案。script的src屬性可以訪問網路上的資源,並script標籤可以拿到響應體。

function

test

(json)

<

/srcipt>

"">

<

/script>

我們可以看到,我們預先定義了乙個函式叫test,再然後在src裡加了乙個引數callback=test,可以發現,當請求完成,會自動呼叫test這個函式,並且把響應體(json資料)當做引數傳遞過來.實際上是瀏覽器用script的src去發起請求,並且傳遞乙個引數叫callback=函式名,伺服器接收到這個函式名,在返回的響應體裡面呼叫這個函式,並且把json當做引數傳遞.

注意:(1).jsonp不是一套新技術,只是聰明的程式設計師想出的一套方案

(2)能不能用這套方案,要看伺服器端**怎麼寫,伺服器端如果寫了呼叫函式的**,那麼就能支援jsonp方案.

如果是在jquery中使用ajax,則只需要在datatype屬性中把json改為jsonp即可;

2、後端處理跨域方法:使用cors解決跨域問題,即跨域資源共享,設定響應頭。

<

?php

$json =

array

("name"

=>

"jack"

,"age"

=>16)

;//代表告訴瀏覽器,我允許任意網域名稱訪問我這個介面

//如果寫乙個*,代表所有網域名稱都可以來訪問我

// header('access-control-allow-origin: *');

//如果寫的是指定網域名稱,代表只有這個網域名稱可以訪問

header

('access-control-allow-origin: *');

echo json_encode

($json);?

>

3、前端跨域方法:使用vue

找到config檔案下->index.js檔案,修改propytable中的target的值。

proxytable:

}}

4、iframe巢狀通訊,postmessage

html5引入了乙個全新的api:跨文件通訊 api(cross-document messaging)。這個api為window物件新增了乙個window.postmessage方法,允許跨視窗通訊,不論這兩個視窗是否同源。

為什麼會產生跨域問題?

1 瀏覽器限制 2 跨域 協議,網域名稱,埠不一樣都是跨域 3 xhr xmlhttprequest請求 同時滿足三個條件才有可能產生跨域問題。解決跨域問題方案。1,從瀏覽器出發,允許瀏覽器跨域。2,從xhr xmlhttprequest 出發 1 避免發生跨域。使用jsonp,由於jsonp請求是...

跨域相關問題 為何會產生跨域?如何解決跨域?

之前面試官基本都是問如何解決跨域問題,今天遇到乙個公司問什麼是跨域,為什麼會產生跨域問題,雖然之前看過相關的問題,但是突然感覺有點蒙,自我感覺回答的不是很全面和準確,所以啊,看問題還真是得知其然並知其所以然,今天算重新加深一下對跨域的理解!跨域問題是因為瀏覽器的同源策略引起的,一種瀏覽器的安全機制,...

什麼是跨域?解決跨域的方法

由於瀏覽器出於安全考慮的同源策略限制需要跨域,所謂的同源就是兩個域需要相同的 協議 protocol 網域名稱 host 埠 port 必須相同 三者之前任何乙個不同都構成跨域的情況,比如說前後端分離之後,前後都在兩個域之下,前端的瀏覽器請求後端伺服器的資料的時候就需要做跨域處理 1 無法讀取非同源...