在Crossrider扩展中使用AJAX请求的CSP问题

Question

我试图在Crossrider扩展中运行AJAX请求，但是我得到了一个与CSP相关的错误。

以下是我的代码(为保护隐私而修改)：

$.ajax({
  url : "https://example.com/...",
  type : 'POST',
  dataType : 'json',
  data : {user: "user", pass: "pass"}
  }).done(function(data) {
    console.log("POST Succeeded");
  }).fail(function(a, b, c, d) {
    console.log("POST Failed");
});

如果我从扩展中运行代码，它不能工作，并且给出“访问被拒绝”的错误！

为什么我不能在我的Crossrider扩展中运行请求？

Answer 1

在扩展中使用标准的Crossrider AJAX方法通常会导致跨域问题，从而阻止对内容的访问；因此，在编写jQuery扩展时，最佳实践是使用框架提供的appAPI.request方法，这些方法是专门为跨浏览器和跨域安全而开发的。

因此，在您的示例中，可以在extension.js或background.js中重写POST请求，如下所示：

appAPI.ready(function($) {
  appAPI.request.post({
    url: "https://example.com/...",
    contentType: "application/json",
    postData: {user: "user", pass: "pass"},
    onSuccess: function(response) {
      console.log("POST Succeeded");
    },
    onFailure: function(code) {
      console.log("POST Failed");
    }
  });
});

披露：我是一名Crossrider员工