Enabling CORS in WebApi for Cross-Domain Requests

Step 1: Install CORS in WebApi Project

Configure CORS globally in the Web API configuration file (Global.asax): ``` public class WebApiApplication : HttpApplication { protected void Application_Start() { #region Cross-Origin Resource Sharing var config = GlobalConfiguration.Configuration; var corsSettings = new EnableCorsAttribute("", "", "*"); config.EnableCors(corsSettings); #endregion AreaRegistration.RegisterAllAreas(); GlobalConfiguration.Configure(WebApiConfig.Register); } }

### Step 2: Controller Configuration

Add the EnableCors attribute to your controllre: ```
[EnableCors(origins: "*", headers: "*", methods: "*")]
public class MindmapController : ApiController
{
    // Controller implementation
}

Step 3: Response Implementation

Important: Do not return data as a plain string. If you do, the JSONP callback will not be recognized and the success handler will never execute. This is a common issue when using Angular's $http with JSONP. Implementation 1 - Using HttpResponseMessage: ``` public HttpResponseMessage FetchMindData(int? companyId, int? parentNode, string callback) { var dataModel = new object();

return new HttpResponseMessage(HttpStatusCode.OK)
{
    Content = new StringContent(
        callback + "(" + JsonConvert.SerializeObject(dataModel) + ")",
        Encoding.UTF8,
        "text/plain"
    )
};

}

Implementation 2 - Using MVC's JavaScriptResult: ```
public JavaScriptResult FetchMindData(int? companyId, string callback)
{
    object dataModel = new object();
    dataModel.root = companyData;
    string jsonpPayload = callback + "(" + JsonConvert.SerializeObject(dataModel) + ")";
    
    return JavaScript(jsonpPayload);
}

Step 4: Frontend Implementation

Angular controller for JSONP requests: ``` angular.module('mindmapApp', ['kityminderEditor']) .controller('MainController', function ($scope, $http, $sce) {

    $scope.initializeEditor = function (editor, minder) {
        window.currentEditor = editor;
        window.currentMinder = minder;
        
        var apiEndpoint = "https://example.com/api/minddata?callback=JSON_CALLBACK";
        
        $sce.trustAsResourceUrl(apiEndpoint);
        $http.jsonp(apiEndpoint)
            .success(function (result) {
                console.log(result);
                window.currentEditor.minder.importData('json', JSON.stringify(result));
            })
            .error(function (error) {
                console.log(error);
            });
    };
});

### Alternative: jQuery JSONP Implementation

$.ajax({ url: apiEndpoint, type: 'GET', dataType: 'jsonp', jsonp: 'callback', jsonpCallback: 'handleResponse' });

window.handleResponse = function (responseData) { console.log(responseData); };