chrome擴展中的跨域ajax調用

Question

我正在做一個小的擴展來測試我的api。 但是在使ajax調用時會通過錯誤。

 Refused to load the script 'http://localhost:8080/acton-demouser/user1?callback=jQuery2210009971836116164923_1456851818933&format=json&_=1456851818934' because it violates the following Content Security Policy directive: "default-src 'self' blob: filesystem: chrome-extension-resource:". Note that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.

而我的ajax調用網址是： http：// localhost：8080 / acton-demouser / user1

manifest.json：

{
  "name": "Ajax Helper",
  "version": "1.0",
  "description": "My first Chrome extension.",
  "manifest_version": 2,
  "browser_action": {
    "default_icon": "icon.png",
    "popup": "popup.html",
    "default_popup": "popup.html"
  },
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  },
  "icons": { "16": "icon.png", "128": "icon.png" },
  "content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'",
  "permissions": [
    "http://*/*"
  ]
}

js文件：-

$("form").submit(function(){
    var ajaxType = $('#request-method-selector option:selected').val();
    var urlPrefix = 'http://localhost:8080/acton-demo';
    var url = $('#url').val();
    if(ajaxType === 'GET'){
        $.ajax({
            url: (urlPrefix+url),
            error: function() {
                    $('#error').html('<p>An error has occurred</p>');
                },
            dataType: 'jsonp',
            success: function(data) {
                        $("#success").html(data);
                    },
            type: 'GET'
        });
    }

});

我在這里想念的是什么。

Answer 1

您需要將content_security_policy定義中的“ http：// localhost：8080 ”指定為白名單。 因為您在使用$ .ajax調用端點時使用'jsonp'作為數據類型。 也就是說，這不是Ajax調用，而是腳本標記的創建。 因此，您必須將域添加到content_security_policy定義中。

"content_security_policy": "script-src 'self' http://localhost:8080 https://ajax.googleapis.com; object-src 'self'",

基本上，我們可以指定僅帶有“ https”前綴的URL。 但是，為了易於開發，它允許我們指定兩個域“ http：// localhost ”和“ http://127.0.0.1 ”。 在文檔中對此進行了描述。