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

时间:2015-12-31 11:38:35

标签: php jquery ajax google-chrome-extension

我想了解一个Google Chrome扩展程序,它会在Ajax请求结果后显示通知。

我编写了允许创建通知的函数,所以我只需要执行Ajax请求,该请求在属于我的远程服务器上获取.php文件。这个请求刚刚失败,没有任何反应。然而,当我试图实现从我的服务器到我的服务器(没有扩展名)的请求,没有问题,我从中扣除它是“跨域”的问题...

以下是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/");
    }
});

最后,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."

3 个答案:

答案 0 :(得分:0)

您需要提供更多响应标头而不仅仅是该标头,有关详细信息,请参阅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

答案 1 :(得分:0)

@ T.J。克劳德

感谢Crowder,我尝试用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://stackoverflow.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;
?>

但仍然无法运作

答案 2 :(得分:0)

我发现了问题......我们必须使用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();

感谢您的帮助;)

编辑:真正的问题是在myScript.js之后定义jquery.js 的manifest.json:

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