前端跨域之Jsonp實現原理及.Net下Jsonp的實現

時間 2019-11-11

標籤前端 jsonp 實現原理欄目 JSON 简体版

原文原文鏈接

jsonp的本質是經過script標籤的src屬性請求到服務端，拿到到服務端返回的數據，由於src是能夠跨域的。前端經過src發送跨域請求時在請求的url帶上回調函數，服務端收到請求時，接受前端傳過來的回掉函數名稱，將其拼接成js函數調用返回到前端便可完成跨域請求。html

前端實現代碼：前端

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    function successFun(data) {
        console.log(data);
    }
    function show(data) {
        console.log(data);
    }
</script>
<!-- 把請求的成功的回掉函數名稱經過url傳參傳到服務端，服務端返回時須要拼接一個函數調用返回到前端 -->
<script src="https://localhost:44381/Home/Action?cb=show"></script>
<script src="https://localhost:44381/Home/GetScript?cb=successFun"></script>

.Net服務端代碼：json

using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;

namespace Jsonp.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Action()
        {
            var cb = Request.Query["cb"];
            return Content(cb + "(123)");
        }
        public IActionResult GetScript()
        {
            var cb = Request.Query["cb"];
            var data = new List<int>()
            {
                1,2,3,4,5,6,8,9,6,3,5,2,0,3
            };
            var result = $"{cb}({JsonConvert.SerializeObject(data)})";
            return Content(result);
        }
    }
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。