使用OMDB API时如何解决401错误?

永爷爷

编辑:我已经添加了来自OMDB的响应

{Response: "False", Error: "Invalid API key!"}
Error: "Invalid API key!"
Response: "False"

我是Web开发的新手,我正在尝试构建一个chrome扩展程序,以在netflix上显示imdb分数。我正在使用OMDB API来执行此操作。一开始我遇到以下错误:

“混合内容:位于处的页面已通过HTTPS加载,但请求了不安全的XMLHttpRequest端点。该请求已被阻止;必须通过HTTPS提供内容。”

但是我只是将URL中的“ http”更改为“ https”,但它消失了。但是,现在我收到401错误,我认为这意味着我的访问被拒绝。这是完整错误的图片

这是扩展的代码

清单文件:

{
  "manifest_version": 2,
  "name": "1_ratings_netflix",
  "version": "0.1",
  "description": "Display imdb ratings on netflix",
  "content_scripts": [
  {
    "matches": [
      "https://www.netflix.com/*", "https://www.omdbapi.com/*"
    ],
    "js": ["content.js"]
  }
  ],
  "icons": { "16": "icon16.png", "48":"icon48.png"},
  "permissions": [
    "https://www.netflix.com/*", "https://www.omdbapi.com/*"
  ]
}

内容文件:

    function fetchMovieNameYear() {
    var synopsis = document.querySelectorAll('.jawBone .jawbone-title-link');
    if (synopsis === null) {
        return;
    }

    var logoElement = document.querySelectorAll('.jawBone .jawbone-title-link .title');

    if (logoElement.length === 0)
        return;

    logoElement = logoElement[logoElement.length - 1];

    var title = logoElement.textContent;

    if (title === "")
        title = logoElement.querySelector(".logo").getAttribute("alt");

    var titleElement = document.querySelectorAll('.jawBone .jawbone-title-link .title .text').textContent;

    var yearElement = document.querySelectorAll('.jawBone .jawbone-overview-info .meta .year');
    if (yearElement.length === 0)
        return;
    var year = yearElement[yearElement.length - 1].textContent;

    var divId = getDivId(title, year);
    var divEl = document.getElementById(divId);
    if (divEl && (divEl.offsetWidth || divEl.offsetHeight || divEl.getClientRects().length)) {
        return;
    }

    var existingImdbRating = window.sessionStorage.getItem(title + ":" + year);
    if ((existingImdbRating !== "undefined") && (existingImdbRating !== null)) {
        addIMDBRating(existingImdbRating, title, year);
    } else {
        makeRequestAndAddRating(title, year)
    }
};

function addIMDBRating(imdbMetaData, name, year) {
    var divId = getDivId(name, year);

    var divEl = document.getElementById(divId);
    if (divEl && (divEl.offsetWidth || divEl.offsetHeight || divEl.getClientRects().length)) {
        return;
    }

    var synopsises = document.querySelectorAll('.jawBone .synopsis');
    if (synopsises.length) {
        var synopsis = synopsises[synopsises.length - 1];
        var div = document.createElement('div');

        var imdbRatingPresent = imdbMetaData && (imdbMetaData !== 'undefined') && (imdbMetaData !== "N/A");
        var imdbVoteCount = null;
        var imdbRating = null;
        var imdbId = null;
        if (imdbRatingPresent) {
            var imdbMetaDataArr = imdbMetaData.split(":");
            imdbRating = imdbMetaDataArr[0];
            imdbVoteCount = imdbMetaDataArr[1];
            imdbId = imdbMetaDataArr[2];
        }
        var imdbHtml = 'IMDb rating : ' + (imdbRatingPresent ? imdbRating : "N/A") + (imdbVoteCount ? ", Vote Count : " + imdbVoteCount : "");

        if (imdbId !== null) {
            imdbHtml = "<a target='_blank' href='https://www.imdb.com/title/" + imdbId + "'>" + imdbHtml + "</a>";
        }

        div.innerHTML = imdbHtml;
        div.className = 'imdbRating';
        div.id = divId;
        synopsis.parentNode.insertBefore(div, synopsis);
    }
}

function getDivId(name, year) {
    name = name.replace(/[^a-z0-9\s]/gi, '');
    name = name.replace(/ /g, '');
    return "aaa" + name + "_" + year;
}

function makeRequestAndAddRating(name, year) {

    var url = "https://www.omdbapi.com/?i=tt3896198&apikey=**{API_KEY}**" + encodeURI(name)
        + "&y=" + year + "tomatoes=true";

    var xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.withCredentials = true;
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.onload = function () {
        if (xhr.status === 200) {
            var apiResponse = JSON.parse(xhr.responseText);
            var imdbRating = apiResponse["imdbRating"];
            var imdbVoteCount = apiResponse["imdbVotes"];
            var imdbId = apiResponse["imdbID"];
            var imdbMetaData = imdbRating + ":" + imdbVoteCount + ":" + imdbId;
            window.sessionStorage.setItem(name + ":" + year, imdbMetaData);
            window.sessionStorage.setItem("metaScore:" + name + ":" + year, metaScore)
            window.sessionStorage.setItem("rotten:" + name + ":" + year, rottenRating);
            addIMDBRating(imdbMetaData, name, year);
            addRottenRating(rottenRating, name, year);
            addMetaScore(metaScore, name, year);
        }
    };
    xhr.send();
}

if (window.sessionStorage !== "undefined") {
    var target = document.body;
    // create an observer instance
    var observer = new MutationObserver(function (mutations) {
        mutations.forEach(function (mutation) {
            window.setTimeout(fetchMovieNameYear, 5);
        });
    });
    // configuration of the observer:
    var config = {
        attributes: true,
        childList: true,
        characterData: true
    };
    observer.observe(target, config);
}
埃德·卢卡斯

对OMDB发布请求和响应将很有帮助(您可以在开发工具的“网络”选项卡中找到它们)。

有一两件事触发CORS(跨域请求)错误时,指定以外的内容类型application/x-www-form-urlencodedmultipart/form-datatext/plain如果我没记错的话,即使不指定请求的内容类型,OMDB API也会返回JSON响应,因此您应该尝试删除以下行:

xhr.setRequestHeader('Content-Type', 'application/json');

有关不会触发CORS的“简单请求”的更多信息:https : //javascript.info/fetch-crossorigin#simple-requests

您还需要获取一个API密钥(https://www.omdbapi.com/apikey.aspx),并**{API_KEY}**用该密钥替换代码。您还需要将t关键字添加到查询字符串中,否则标题将附加到您的API关键字中。

var url = "https://www.omdbapi.com/?i=tt3896198&apikey=**{API_KEY}**" + "&t="
 + encodeURI(name) + "&y=" + year + "tomatoes=true";

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用Alamofire(iOS)从OMDb API获取数据

使用访存添加Omdb Api?

使用验证时如何解决错误?

使用Java从OMDB(IMDB)API进行Java JSON解码

内部服务器错误(使用 OMDB API 时返回错误)

在 Python Flask 应用程序中使用外部 API 时如何解决无返回错误?

使用 Youtube API Key 进行搜索时如何解决错误 403()?

使用React时如何解决400错误请求错误?

在python中使用熊猫时如何解决“属性错误”

使用 BeautifulSoup 请求时如何解决超时错误?

使用solvePnP时如何解决断言错误?

使用Boilerpipe时如何解决ConnectException错误?

使用Postman时如何解决nodejs中的CORS错误?

使用beautifulsoup时如何解决属性错误?

如何解决错误:使用nodejs时监听EADDRINUSE?

使用 RAdam 优化器时如何解决类型错误?

使用HttpClient时如何解决302错误?

App Gradle,使用Firebase Core时如何解决错误?

我在使用float函数时遇到错误,如何解决?

使用 case_when 时如何解决此错误?

我正在尝试使用输入字段中的文本并按下搜索按钮进行 OMDB API 调用

使用 AXIOS 进行电影搜索后,OMDb API 需要帮助获取 /results 页面

我该如何解决“访问令牌来自错误的受众或资源。” 尝试使用MSAL令牌访问Azure的REST api时

尝试使用Google Apps脚本将图像上传到Graph API时,如何解决“异常:超出限制”错误?

OMDb API多个结果

OMDb API烂番茄

使用Git时如何解决“错误:索引错误–致命:索引文件损坏”

使用 RecyclerView 时如何解决 NullPointerException?

使用 JMapViewer 时如何解决 ClassNotFoundException