CODEWITHSUNDEEP
javascriptjquerygoogle-chromecross-domain
LA_
LA_

Reputation: 20409

How to perform cross domain requests locally in JavaScript/Chrome?

I am developing a test page, which will used only by myself and only with Google Chrome. Is there any way to perform cross domain requests to 3rd party server (which doesn't allow such requests) with such conditions? The requests could be GET or OPTIONS.

(I am aware about Chrome extensions like Advanced REST client, which could perform such requests, but it doesn't help me since complex calculations should be performed prior to request execution)

Upvotes: 1

Views: 5092

Answers (3)

apsillers
apsillers

Reputation: 115940

One option is to disable the same-origin policy entirely, as detailed in Disable same origin policy in Chrome. This will probably do the trick for you, but it's a bit inelegant, as it turns off the same-origin policy for the entire browser instance.

A second option is to create a small Chrome extension that holds all of the files that you need to load. It will make your files accessible via chrome-extension://... and only files within that extension will be immune from the same-origin policy.

Create a new folder, put your testing Web page in it, and create a manifest.json file in the same folder:

/testing_extension
    test_page_immune_from_same_origin.html
    script_used_by_test_page.js
    styles_for_test_page.css
    manifest.json

The contents of manifest.json should be

{
  "name": "All-origin access extension",
  "manifest_version": 2,
  "version": "1.0",
  "permissions": ["<all_urls>"]
}

Load the extension by going to chrome://extensions, enabling Developer Mode, and selecting the new folder with Load unpacked extension... option.

You can view your page as an extension resource chrome-extension://[app_id]/[file_name], where "app_id" is the hash listed for the extension on the chrome://extensions page. (It will be a long string of lowercase letters.) Now when the page performs cross-origin resources, it does so with the authority of a browser extension, unrestricted by the same-origin policy.

Note that you will need to move any inline scripts into separate files in order to comply with extension CSP requirements.

Upvotes: 1

Losbear
Losbear

Reputation: 3315

I'm working on a project similar to this and I had to upload a simple html file to one of my prod servers for testing so I could test the cross domain functionality. The html file pointed to localhost, so it would only work for me while in development.

The jquery code looked like this (just in case it helps):

        $.ajax({
            type: "POST",
            dataType: "json",
            cache: false,
            url: url,
            data: data,
            crossDomain: true,
            success: function (data) {
                ATSJBAjax = null;
                if (callback != null) callback(data);
            }
        });

Also I'm using c#/MVC, and I had to add an attribute to all controller methods that added "Access-Control-Allow-Origin" to the response header so Chrome would be OK with it. I called the attribute "AllowCrossDomainAccess", which ref'd the class below:

public class AllowCrossDomainAccessAttribute : ActionFilterAttribute
{
    public override void OnActionExecuting(ActionExecutingContext filterContext)
    {
        filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Origin", "*");
        base.OnActionExecuting(filterContext);
    }
}

Upvotes: 1

Leeft
Leeft

Reputation: 3837

One way is to serve your files off a webserver rather than the local file system. Another way is to start Chrome with a flag:

chrome --disable-web-security

(From Cross-origin image load denied on a local image with THREE.js on Chrome)

A more extensive list of flags is here: http://peter.sh/experiments/chromium-command-line-switches/

Upvotes: 1

Related Questions