在Chrome擴展中跨域ajax調用

Question

我正在做一個小擴展來測試我的apis。但是，雖然使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'作爲dataType。也就是說，它不是Ajax調用，而是一個腳本標記創建。因此，您必須將域添加到content_security_policy定義中。

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

基本上，我們可以指定只有'https'前綴的網址。但是，爲了便於開發，它允許我們指定兩個域'http://localhost'和'http://127.0.0.1'。這在document中描述。