Chrome扩展程序“ No-Access-Control-Allow-Origin” api调用命中服务器,但返回错误

时间:2018-08-03 20:02:20

标签: javascript jquery google-chrome google-chrome-extension cors

我对运行在ngrok上的本地服务器有一个简单的ajax请求。 AJAX调用可以访问服务器,但是浏览器会停止响应并显示以下错误

Failed to load https://8ee2ec1.ngrok.io/my_endpoint: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'chrome-extension://cahhljhlafgalbkdajphjklmameocbba' is therefore not allowed access.

我该如何解决?我本来以为如果这是一个CORS问题,那么api请求就不会发送到服务器,但是确实可以。

// request

  var params = {
    type: "POST",
    url: "https://8ee2ec1.ngrok.io/my_endpoint",
  }
  $.ajax(params).done(function(resp) { console.log(resp) }
  })

清单

{
  "permissions": ["http://*/*", "https://*/*", "notifications", "webRequest", "tabs"],
  "background": {
    "scripts": ["jquery-3.2.1.min.js", "background.js"],
    "persistent": true
  },
  "permissions": [
    "storage"
  ],
  "content_scripts": [
    {
      "matches": ["https://www.facebook.com/*"],
      "js": ["jquery-3.2.1.min.js", "content.js"]
    }
  ]
}

1 个答案:

答案 0 :(得分:0)

一个CORS问题。如错误所示,您需要在端点的响应中添加一个Access-Control-Allow-Origin header(以及其他CORS标头)。就这么简单。

这里是MDN's take on CORS,供参考。

它通过OPTIONS方法下的HTTP请求到达服务器。这就是CORS请求的工作方式;他们必须到达服务器才能读取您的标头。服务器用适当的CORS标头响应OPTIONS请求后,它会根据客户端代码中指定的方法发送另一个请求。