如何使用JSONP绕过XMLHttpRequest的错误？

Question

有人可以帮我使用JSONP，所以我可以绕过这个错误：

  

XMLHttpRequest无法加载https://na.api.pvp.net/api/lol/na/v1.3/stats/by-summoner/24332988/ranked?season=SEASON4&?api_key=***********。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此不允许原点'null'访问。响应的HTTP状态代码为401。

我无法理解如何使用它。

这是我现在的代码，它给出了上面的错误。我该如何解决这个问题？

                     //ap.js
        var summonerLookUp = function () {
            // DECLARE URIs
            var nameUri = 'https://na.api.pvp.net/api/lol/na/v1.4/summoner/by-name/';
            var statUri = 'https://na.api.pvp.net/api/lol/na/v1.3/stats/by-summoner/';
            var statEnd = '/ranked?season=SEASON4&';
            // Expose API Key for demo purposes
            var apiKey  = '?api_key=******************************';
            // Grab summoner names;
            var summOne = $('#summOne').val();
            var summTwo = $('#summTwo').val();
            // declare divIds that need to be modified later;
            var divIds = {
                summoner    : '',
                sLevel      : 'Summoner Level : ',
                sId         : 'Summoner ID: ',
                champKills  : 'Champion Kills: ',
                death       : 'Death Total: ',
                assist      : 'Assist Total: ',
                kda         : 'Avg KDA: ', 
                win         : 'Wins: ',
                loss        : 'Losses: ',
                minions     : 'Minion Kills: ',
                turrets     : 'Turret Kills: '
            };
            // Declare general errorhandler
            var errorHandler = function () {
                alert('Sorry, please try again.');
                    };
            // Must fetch summoner info first to get basic summoner data
            var fetchSummonerStats = function (summoner) {
                $.ajax({
                    url: nameUri + summoner + apiKey,
                    type: 'GET',
                    dataType: 'json',
                    data: {},
                    success: function (summData) {
                        summData = summData[summoner];
                        // attach .summoner property to summData for divIds later
                        summData.summoner = summoner;
                        console.log('SUMM DATA >>', summData);
                        fetchDetail(summData);
                    },
                    error: errorHandler
                });
            };
            // Declare secondary ajax call to fetch stats
            // provide summonername an data to attach
            var fetchDetail = function (summoner) {
                $.ajax({
                    url: statUri + summoner.id + statEnd + apiKey,
                    type: 'GET',
                    dataType: 'json',
                    data: {},
                    success: function (summStats) {
                        // include previous data to attach for divIds
                        summStats.id        = summoner.id;
                        summStats.summoner  = summoner.summoner;
                        summStats.level     = summoner.summonerLevel;
                        attachStats(summStats);
                    },
                    error: errorHandler
                });
            };
            var attachStats = function(summStats) {
                var summNumber;
                /*
                    attach a 1 or 2 based on summonername;

                    if summStats.summoner === xkouki,
                    summNumber = 1 else it must be summTwo
                */
                if (summStats.summoner === summOne) {
                    summNumber = 1;
                } else if (summStats.summoner === summTwo) {
                    summNumber = 2;
                } else {
                    return errorHandler();
                }
                // change summoner to summoner as saved in riot api
                summStats.summoner = summStats.name;

                for (var divId in divIds) {
                    /*
                        if divId === summoner
                        val = 'xkouki';
                    */
                    var val = summStats[divId];
                    /* 
                        add summonerNumber to the current key in divIds
                        if divId === summoner
                        and summNumber === 1
                        id = summoner1;
                        etc ...
                    */
                    var id  = divId + summNumber;
                    /*
                        attach prefix to actual value
                        if divid === summoner

                        divIds.summoner = ''
                        innerHtml = '' + xkouki
                    */
                    document.getElementById(id).innerHtml = divIds[divId] + val;
                }
            };
            // make sure both values exist
            if (!summOne || !summTwo) {
                alert('Please make sure you have an entry for summoner one & two');
            } else {
                // loop through this array using forEach and fetchSummoner
                [summOne, summTwo].forEach(function (summoner) {
                    fetchSummonerStats(summoner);
                });
            }
        };

        $(document).ready(function() {
            $('#list').click(function() {
                $('.list').fadeToggle("fast");    
            });
        });

  <!DOCTYPE html>
    <html>
    <head>
        <title>League Stats</title>

        <link rel="stylesheet" type="css/text" href="styles.css"/>
        <link rel="stylesheet" type="css/text" href="font.css"/>
        <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script> 
        <link href='http://fonts.googleapis.com/css?family=Trade+Winds' rel='stylesheet' type='text/css'>
        <script src="app.js"></script>
    </head>
    <body>
        <div class="container">

            <header class="title">
                <h1>League of Legends Face Off</h1>
                    <input id="summOne" placeholder="summoner name"/>
                    <input id="vs" type="button" value="VS" onclick="summonerLookUp();" />
                    <input id="summTwo" placeholder="summoner name"/>
            </header>
            <div class="one">
                <div id="summoner1"></div>
                <div id="sLevel1"></div>
                <div id="sID1"></div>
                <div id="champKills1"></div>
                <div id="death1"></div>
                <div id="assist1"></div>
                <div id="kda1"></div>
                <div id="win1"></div>
                <div id="loss1"></div>
                <div id="minions1"></div>
                <div id="turrets1"></div>
            </div>
            <div class="logo"><img class="vs" src="vs.png"></div>
            <div class="two">
                <div id="summoner2"></div>
                <div id="sLevel2"></div>
                <div id="sID2"></div>
                <div id="champKills2"></div>
                <div id="death2"></div>
                <div id="assist2"></div>
                <div id="kda2"></div>
                <div id="win2"></div>
                <div id="loss2"></div>
                <div id="minions2"></div>
                <div id="turrets2"></div>
            </div>

            <button id="list">summoner names</button>
                <div class="list" style="display: none;">
                    xkouki | theoddone | le groot | renesisbuddy | azoh | gripex | bestriven na
                    <br/> 
                    dyrus | kingtrick | voyboy | robertxlee | iamgosu | balls | fabbbyyy | azingy | megazero
                </div>
        </div>
    </body>
    </html>