跨域請求的幾種解決方法

2021-09-22 10:22:16 字數 2578 閱讀 9679

跨域請求:兩個不同網域名稱之間的通訊。

ajax受到瀏覽器的限制(安全性考慮)不允許跨域通訊。

//報錯

req.

send()

;script

>

預設情況下瀏覽器採用同源策略:乙個域下面的js只能請求同乙個域下面的文件內容,不能跨域請求。

1.1 解決方法一:src屬性

使用標籤的src屬性,src屬性是沒有同源的限制的

src=

''/>

src=

''>

script

>

1.2 解決方法二:php**

a客戶端

a伺服器

<?php 

echo

file_get_contents

('');

b伺服器

<?php 

echo

'鋤禾日當午'

;

小結:客戶端有同源策略,伺服器沒有同源策略,我們可以使用伺服器作為**去跨域請求。

a伺服器()

b伺服器(

1.3 解決方法三:jsonp

jsonp=json+動態script。是一種非官方協議,為了解決js的跨域請求

通過的src屬性引入跨域檔案從而攜帶資料實現了資料的跨域訪問。

**實現

客戶端**(www.php.com

>

>

function

fun(data)

window.

onload

=function()

}script

>

type

="button"

value

="確定"

id='btn'

>

body

>

php**(

<?php 

$stu

=array

('tom'

,'berry');

$data

=json_encode

($stu);

echo

"($data)";

//拼接函式的呼叫

小結:

1、通過動態的新增script的src屬性

2、傳遞的函式名和客戶端定義的函式名要一致

3、跨域的伺服器返回的是呼叫函式的形式

思考:json與jsonp的區別?

答: json是一種通用的資料交換格式,主要實現資料的傳輸與儲存。

jsonp是一種非官方協議,為了解決js的跨域請求問題。
1.4 解決方法四:cors實現跨域

設定允許接受的源

header

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

//允許php.com訪問

cors(cross-origin resource sharing)跨源資源共享:伺服器在響應頭中告知瀏覽器那些域請求限制,哪些域請求接受。

客戶端**(

>

>

window.

onload

=function()

req.

send()

}}script

>

type

="button"

value

="確定"

id='btn'

>

body

>

伺服器端**(

header

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

//允許所有的網域名稱訪問

echo

'i am a boy'

;

js 幾種跨域解決方法

同源策略 js只能與同乙個域中的頁面進行通訊,必須是協議 網域名稱 埠都相同,相同域下才能相互通訊,這可以被認為是一種通訊原則,叫同源策略。跨域 js跨域是指通過js在不同的域之間進行資料傳輸或通訊,比如用ajax向乙個不同的域請求資料,或者通過js獲取頁面中不同域的框架中 iframe 的資料。只...

關於前端跨域請求的解決方法

近期在做專案 前後端業務分離 遇到跨域請求失敗的問題,記錄一下,報錯資訊如下 access to xmlhttprequest at from origin http localhost 8000 has been blocked by cors policy no access control a...

Jquery使用AJAX請求跨域解決方法

在解決方法中使用到jsonp 首先了解jsonp的原理 jsonp原理 jsonp其實就是乙個跨域解決方案。js跨域請求資料是不可以的,但是js跨域請求js指令碼是可以的。可以把資料封裝成乙個js語句,做乙個方法的呼叫。跨域請求js指令碼可以得到此指令碼。得到js指令碼之後會立即執行。可以把資料做為...