Javascript 使用OMDB API时如何修复401错误？

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

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

我是网络开发新手，我正在尝试构建一个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);
}

函数fetchMovieNameYear（）{ var synopsis=document.queryselectoral（'.jawBone.jawBone title link'）； if（概要===null）{ 返回； } var logonement=document.queryselectoral（'.jawBone.jawBone title link.title'）； if（logoElement.length==0） 返回； logoElement=logoElement[logoElement.length-1]； var title=logoElement.textContent； 如果（标题==“”） title=logoElement.querySelector（“.logo”）.getAttribute（“alt”）； var titleElement=document.queryselectoral（'.jawBone.jawBone title link.title.text'）.textContent； var yearElement=document.queryselectoral（'.jawBone.jawBone overview info.meta.year'）； 如果（yearElement.length==0） 返回； var year=yearElement[yearElement.length-1].textContent； var divId=getDivId（标题，年份）； var divEl=document.getElementById（divId）； if（divEl&（divEl.offsetWidth | | | divEl.offsetHeight | | divEl.getclientracts（）.length））{ 返回； } var existingImdbRating=window.sessionStorage.getItem（title+“：”+年）； if（（existingImdbRating！==“未定义”）&&（existingImdbRating！==null））{ 新增评级（现有评级、职称、年份）； }否则{ MakeRequestandAddressing（标题、年份） } }; 函数添加校准（imdbMetaData，名称，年份）{ var divId=getDivId（名称、年份）； var divEl=document.getElementById（divId）； if（divEl&（divEl.offsetWidth | | | divEl.offsetHeight | | divEl.getclientracts（）.length））{ 返回； } var synopsises=document.queryselectoral（'.jawBone.synopsis'）； if（synopsises.长度）{ 变量synopsis=大纲[synopsis.length-1]； var div=document.createElement（'div'）； var imdbRatingPresent=imdbMetaData&&（imdbMetaData！=“未定义”）&&（imdbMetaData！=“不适用”）； var imdbVoteCount=null； var imdbRating=null； var imdbId=null； 如果（imdbRatingPresent）{ var imdbMetaDataArr=imdbMetaData.split（“：”）； imdbRating=imdbMetaDataArr[0]； imdbVoteCount=imdbMetaDataArr[1]； imdbId=imdbMetaDataArr[2]； } var imdbHtml='IMDb rating:'+（imdbRatingPresent？imdbRating:“不适用”）+（imdbVoteCount？”，票数：“+imdbVoteCount:”）； if（imdbId！==null）{ imdbHtml=“”； } div.innerHTML=imdbHtml； div.className='imdbRating'； div.id=divId； 大纲.parentNode.insertBefore（div，大纲）； } } 函数getDivId（名称，年份）{ 名称=名称。替换（/[^a-z0-9\s]/gi，”）； name=name.replace（//g'，）； 返回“aaa”+名称+年份； } 函数MakeRequestAndAddressing（名称、年份）{ 变量url=”https://www.omdbapi.com/?i=tt3896198&apikey=**{API_KEY}**“+encodeURI（名称） +“&y=“+year+”番茄=true”； var xhr=new XMLHttpRequest（）； xhr.open（'GET'，url）； xhr.withCredentials=true； setRequestHeader（'Content-Type'，'application/json'）； xhr.onload=函数（）{ 如果（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（名称+“：”+年份，imdbMetaData）； window.sessionStorage.setItem（“元分数：“+name+”：“+year，元分数”） window.sessionStorage.setItem（“腐烂：“+name+”：“+year，腐烂等级”）； 添加校准（imdbMetaData，名称，年份）； 添加腐烂等级（腐烂等级、名称、年份）； 添加元分数（元分数、名称、年份）； } }; xhr.send（）； } if（window.sessionStorage！=“未定义”）{ var target=document.body； //创建一个观察者实例 var观察者=新的突变观察者（功能（突变）{ 突变。forEach（功能（突变）{ setTimeout（fetchMovieNameYear，5）； }); }); //观察员的配置： 变量配置={ 属性：正确， 儿童名单：是的， characterData：true }; observer.observe（目标，配置）； }

---

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

触发CORS（跨源请求）错误的一件事是指定除

应用程序/x-www-form-urlencoded

、

多部分/表单数据

或

文本/普通

以外的内容类型。如果我没有记错，OMDB API将返回JSON响应，即使没有指定请求的内容类型，因此您应该尝试删除以下行：

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

有关不触发CORS的“简单请求”的更多信息：

您还需要获取API密钥（）并替换

**{API_KEY}**

在代码中使用密钥。您还需要将

t

键添加到查询字符串中，否则标题将附加到API键中

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

---

现代Chrome不允许内容脚本中的跨源请求。在中执行此操作，并使用消息传递与内容进行通信