Cross-Domain jQuery.Ajax request - Chrome extension

Question

I would like to realize an Google Chrome extension, which would show a notification following the result of an Ajax request.

I coded the function which allows to create a notification, so I just have to do the Ajax request which fetches a .php file on a remote server which belongs to me. This request just failed, nothing happened. Nevertheless when I try to realize the request since my server towards my server (without the extension), no problem, I deducted from it that it was a problem of "Cross-Domain"...

Here are the important elements (for the problem) of the manifest.json (I just put all possible permissions^^) :

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

Here is the AJax request in myScript.js : (The spawnNotification function works perfectly, tested without the request)

$.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/");
    }
});

And finally, the get.php file :

<?php

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

$str = 15;
echo $str;

?>

What am I doing wrong here? Thanks !

( Here are some topics that did not help me...

Chrome extension Cross Domain Request

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

Adding option `crossDomain : true` in your ajax as well might help. — Nithya Chandrashekaran, Dec 31 '15 at 11:40
@NithyaChandrashekaran: When the request is cross-origin, the [default of `crossDomain` is `true`](http://api.jquery.com/jQuery.ajax/), so it's pointless in this case. — T.J. Crowder, Dec 31 '15 at 11:43

score 0 · Answer 1 · edited May 23 '17 at 10:28

You need to provide more response headers than just that one, see the Cross-Origin Resource Sharing specification for details.

Here's pseudo-code (from my other answer here) of what's required in your server code (sorry, don't write much PHP, hence pseudo-code):

// 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

score 0 · Answer 2 · edited May 23 '17 at 11:59

@T.J. Crowder

Thanks Crowder, I tried to write it in PHP and I first tried that for my 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;
?>

It doesn't work so I searched a bit with what you said, and found that 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;
?>

But still doesn't work

Nitrome · Accepted Answer · 2016-01-05T16:38:46.263

0

I found the problem... we have to use 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();

Thanks for your help ;)

EDIT: the real problem was to define jquery.js after in the myScript.js manifest.json:

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

edited Jan 05 '16 at 16:38

answered Jan 02 '16 at 22:05

Nitrome

11
5

it seems to me that your actual problem was the order of scripts in `"background": { "scripts": [ ... ]}`. You tried to use jQuery before it was defined. – minj Jan 04 '16 at 14:44
Oh, you're write !! Thanks x) (5 hours of research just for that, cool) – Nitrome Jan 05 '16 at 16:36

Cross-Domain jQuery.Ajax request - Chrome extension

3 Answers3