An XHR Cross Origin Proxy allows you to make XHR requests to different friendly API services.
XCOP (XHR Cross Origin Proxy) allows you to make XHR requests to different friendly API services.
With XCOP you can effectively make cross origin XHR requests with full verbs (not only GET and POST but also PUT, DELETE, PATCH, etc). You can also set HTTP headers to your heart's content. Simply place a simple HTML file on the friendly cross origin server (yes, you need access to the server). Under the covers, XCOP package will load this into an iframe and communicate with it via PostMessage. You will need a fairly modern browser.
$ npm install xcop
XCOP us easy to use. Just call XCOP with the origin that you would like to communicate with (xcop.html must be in the root of the cross origin server). XCOP will return a promise that is fulfilled with an XHR object.
You can pass the following options as the second parameter to XCOP:
The returned XHR object accepts a request object that consists of the following:
It returns a promise that is fulfilled with a response object. The response object contains the following:
Let's say that you have a web page that is loaded from http://www.example.com, but you need to post some data to https://api.example.com (i.e. not on the same origin). The code below will show you how to do so.
var xcop = require"xcop";var origin = "";xcoporigindonevar request =url: "/items/123"headers: "content-type": "application/json"method: "PUT"body: JSONstringifyid: 123 name: "new name";xhrrequestdoneconsole.logresponsestatus + " " + responsebody;console.error"Something went wrong." errmessage;;console.errorerrmessage;;
You can also see XCOP in action, live, on the Interwebs! Check out this fiddle. http://jsfiddle.net/donavon/6tozto6v/
Instead of opening your web service up to other websites, you may now "white list" which origins are allowed to access your server.
To do so, edit the
xcop.html file served by the destination server. By default, XCOP allows access from any origin.
var whiteList = ;
To setup a whitelist, replace the
whiteList array with the list of your allows origins.
In our example above, you may chose to only allow http://www.example.com to use your API.
If so, your
xcop.html file will read:
var whiteList = "";
You may choose to use different
xcop.html files with different white lists for development, QA, and production.
Q. I'm getting the error "XCOP is unavailable".
A. You likely have not setup xcop.html in the root of the origin server that you are hitting with XCOP. In the example above, that would be https://api.example.com/xcop.html
Q. How cool is XCOP?
For use under MIT license