跨域jQuery.Ajax请求 - Chrome扩展程序

问题描述：

我想实现Google Chrome扩展程序，该扩展程序会在Ajax请求的结果之后显示通知。跨域jQuery.Ajax请求 - Chrome扩展程序

我编写了允许创建通知的函数，所以我只需要在属于我的远程服务器上获取一个.php文件的Ajax请求。这个请求失败了，什么也没有发生。然而，当我试图实现请求，因为我的服务器对我的服务器（没有扩展名），没有问题，我从它推断，这是一个“跨域”的问题...

这里是重要的元素（对这个问题）对于manifest.json的（我只是把所有可能的权限^^）：

{ 
    "background": { 
     "scripts": ["myScript.js", "jquery-2.1.4.min.js"] 
    }, 
    "manifest_version": 2, 
    "permissions": [ "http://*/", "https://*/" , "http://*/*" , "https://*/*", "tabs", "notifications", "browsingData", "webRequest", "webNavigation" ], 
    ... 
    ... 
}

这里是myScript.js AJAX请求：（该spawnNotification功能完美的作品，而要求测试）

$.ajax({ 
    url: "http://www.domain.com/test/get.php", 
    type: "GET", 
    crossDomain : true, 
    success: function() { 
     spawnNotification("Title", "work", "img/notif.png", "http://www.domain.cor/forum/"); 
    }, 
    error: function() { 
     spawnNotification("Title", "error", "img/notif.png", "http://www.domain.co/forum/"); 
    } 
});

和fi最后，get.php文件：

<?php 

header("Content-Type: text/plain"); 
header("Access-Control-Allow-Origin: *"); 

$str = 15; 
echo $str; 

?>

我在做什么错在这里？谢谢！

（这里有一些题目没有帮助我...

Chrome extension Cross Domain Request

Chrome extension xhr cross domain request gives error:"is not allowed by Access-Control-Allow-Origin."）

在您的ajax中添加选项'crossDomain：true'也可能有所帮助。 –

谢谢，但它不起作用......没有任何改变 – Nitrome

@NithyaChandrashekaran：当请求是交叉原点时，[crossDomain的默认值是'true']（http://api.jquery.com/ jQuery.ajax /），所以在这种情况下毫无意义。 –

答

我发现这个问题......我们必须使用XHR

myScript.js：

var xhr = new XMLHttpRequest(); 
xhr.open("GET", "http://domain.com/test/get.php", true); 
xhr.onreadystatechange = function() { 
    if (xhr.readyState == 4) { 
     alert(xhr.responseText); 
    } 
} 
xhr.send();

感谢您的帮助;）

编辑：真正的问题是后确定的jquery.js在myScript.js 清单中。json：

"background": { 
     "scripts": ["jquery-2.1.4.min.js", "notification.js"] 
},

在我看来，你的实际问题是''背景中的脚本的顺序：{“scripts”：[...]}'。你试图在定义之前使用jQuery。 – minj

哦，你写！谢谢x）（5小时的研究只是为了这个，很酷） – Nitrome

如果你不介意，我会将其作为答案转贴 – minj

答

您需要提供的不仅仅是多了一个响应头，看到了Cross-Origin Resource Sharing specification了解详情。

这里是伪代码（从我的其他答案here）什么在你的服务器代码所需的（对不起，不写太多PHP，因此伪代码）：

// Find out what the request is asking for 
corsOrigin = get_request_header("Origin") 
corsMethod = get_request_header("Access-Control-Request-Method") 
corsHeaders = get_request_header("Access-Control-Request-Headers") 
if corsOrigin is null or "null" { 
    // Requests from a `file://` path seem to come through without an 
    // origin or with "null" (literally) as the origin. 
    // In my case, for testing, I wanted to allow those and so I output 
    // "*", but you may want to go another way. 
    corsOrigin = "*" 
} 

// Decide whether to accept that request with those headers 
// If so: 

// Respond with headers saying what's allowed (here we're just echoing what they 
// asked for, except we may be using "*" [all] instead of the actual origin for 
// the "Access-Control-Allow-Origin" one) 
set_response_header("Access-Control-Allow-Origin", corsOrigin) 
set_response_header("Access-Control-Allow-Methods", corsMethod) 
set_response_header("Access-Control-Allow-Headers", corsHeaders) 
if the HTTP request method is "OPTIONS" { 
    // Done, no body in response to OPTIONS 
    stop 
} 
// Process the GET or POST here; output the body of the response

答

@ T.J。克罗德

感谢克罗德，我试图把它写在PHP和我第一次尝试，对我get.php：

<?php 
header("Content-Type: text/plain"); 
header('Access-Control-Allow-Origin: *'); 
header('Access-Control-Allow-Methods: GET, POST'); 
header("Access-Control-Allow-Headers: X-Requested-With"); 

$str = 15; 
echo $str; 
?>

它不工作，所以我搜索了一下跟你说，发现这https://*.com/a/9866124/5733765

get.php：

<?php 
if (isset($_SERVER['HTTP_ORIGIN'])) { 
    header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}"); 
    header('Access-Control-Allow-Credentials: true'); 
    header('Access-Control-Max-Age: 86400'); 
} 

if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') { 

    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD'])) 
     header("Access-Control-Allow-Methods: GET, POST, OPTIONS");   

    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS'])) 
     header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}"); 

    exit(0); 
} 

$str = 15; 
echo $str; 
?>

但仍然无法正常工作

跨域jQuery.Ajax请求 - Chrome扩展程序

相关推荐