Title: Lightning - CSP and Client Side Callout
Tags: visualforce;lightning-apps
Question: I was reviewing lightning document, it seems the framework is currently limited to make callout only through apex, I understand this is done for security reasons, I feel its a big limitation while we compare with VF and other framework for adoption, it will also result in un-necessary server side code written and compatibility problem with existing projects like ForceTk, etc is a problem, Is there any plan to relax this restriction in future?


Here is the accepted answer: I feel the same pain as you do and asked already a similar question which is answered by Doug here

Lightning: is direct API access on the roadmap?

As to my knowledge this is still up to date and therefore not sure, if or when this constraint might be relaxed. 

Comment for this answer: Thanks!, so for short term there is no clear roadmap
Comment for this answer: My guess: for short term it will stay as it is.
Comment for this answer: the performance reason given is vague though, since the client code executes on browser side.

Here is another answer: It's now possible to call external API using Javascript from within Salesforce Lightning.

Start by going to Setup → CSP Trusted Sites and adding your trusted site. 

Which in this example is: https://api.postcodes.io/

Then use an approach like this:

```({
    postcodeSearch : function(component, postcode) {
        var url = 'https://api.postcodes.io/postcodes/' + postcode;
        this.makeAjaxRequest(component, url);
    },
    callAjax : function(method, url, async, callback) {

        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function(component) {
            if (xmlhttp.readyState == 4 ) {
                callback.call(this, xmlhttp);
            }
        };

        xmlhttp.open(method, url, async);
        xmlhttp.send();
    },
    makeAjaxRequest : function(component, url) {
        this.callAjax("GET", url, true,
                      function(xmlhttp){
                          if (xmlhttp.status == 200) {
                              console.log(xmlhttp.responseText);
                          }
                          else if (xmlhttp.status == 400) {
                              console.log("makeAjaxRequest: 400 Error");
                          }else {
                              console.log("makeAjaxRequest: Error");
                          }
                      }
                     );
    }
})
```

Comment for this answer: this doesn't work for me. I still get `Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://wwwcie.ups.com/rest/XAV. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).` even with adding my site to CSP.
Comment for this answer: @TylerZika the error message says you are missing CORS which can be set via `Setup > CORS > New > Enter an orgin URL pattern`

{'source': 'StackExchangeDataset', 'subset': 'salesforce.stackexchange.com', 'metadata': {'AnswerCount': 2, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2015:00:03/31/15', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<visualforce><lightning-apps>', 'Title': 'Lightning - CSP and Client Side Callout', 'ViewCount': 794, 'id': 70813, 'user_AboutMe': None, 'user_AccountId': 103826.0, 'user_DisplayName': 'realnumber', 'user_Reputation': 1603.0, 'user_Views': 21.0, 'user_id': 2210.0}}