nodejs和jsonp跨域問題

jsonp跨域問題

核心思想:

瀏覽器雖然有同源策略，但是 src 和 href 兩個屬性卻可以跨域訪問。 可以利用這一“漏洞”來請求另一個網站的頁面。

$.post、 $.get 、$.ajax都能發送跨域請求，但是，$.post和$.get是要依靠cors方式的，只有$.ajax能使用jsonp方式 。

$ajax凡是發送跨域請求，核心有一下3點：

• 1.請求類型必須設置爲：‘get’；
• 2.後端返回的數據類型dataType必須是：‘jsonp’；
• 3.必須額外設置一個jsonp參數，該參數可以是任意的英文字符串，常用callback。（該參數產生一個隨機字符串，前端使用該字符串創建一個函數，後端接收該字符串作爲返回函數的名稱）

方式一：利用script標籤的src屬性

案例: 在 http://127.0.0.1:3000/index ===> 顯示 index.html 頁面，在 index.html頁面中使用 script標籤的src屬性請求另一個服務器 http://127.0.0.1:8888/jsonp； 在 http://127.0.0.1:8888/jsonp 返回一個函數調用的字符串

前端：

<script>
    // 函數聲明，函數的形參就能獲得後端返回的數據
    function aaa (data){
        console.log(data);
    }
</script>

<!--前端使用src請求得到的就是一個函數調用，要在之前有對應的函數聲明-->
<script src="http://127.0.0.1:8888/jsonp"></script>

後端：

const express = require('express');
const app = express();
app.listen(8888, () => {
    console.log('app_server is running...');
});
app.get('/jsonp',(ewq,res) => {
    // res.send('aaa(123)');
    res.send('aaa({code:200,message:"請求成功"})');
});

結果：

方式二：$ajax方法（ jsonp實際上是不屬於Ajax請求的，因爲沒有用到 xhr 對象 ）

前端：

<script>
    $.ajax({
        url : 'http://127.0.0.1:8888/getData',
        type : 'get',
        dataType : 'jsonp',
        jsonp : 'callback',
        // jsonpCallback : 'fun',
        success : function (msg){
            console.log(msg);
        }
    })
</script>

後端：

const express = require('express');
const app = express();
app.listen(8888,()=> {
    console.log('server is running');
});

app.get('/getData',(req,res) => {
    console.log(req.query.callback);
    const fun = req.query.callback;
   res.send(fun+'("www")');
});

瀏覽器結果