File Upload angular js with web API on different server

I have an angular app and I want to upload a file using web api deployed on different server.

Actually I prepared a sample having the html on web api and i was successful uploading the file their, but as soon as i try to upload it from my angular app to different server (cross origin than it fails), I have implemented cross origin support too.

Note: I am making an ajax call fro file upload.

<html data-ng-app="MyApp">
<head>
<link rel="stylesheet" href="Styles/bootstrap.min.css">
    <title>Index</title>
<script src="Scripts/angular-cookies.js" type="text/javascript"></script>
<script src="Scripts/angular-route.min.js" type="text/javascript"></script>
<script src="Scripts/angular.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
   debugger;
    $(document).ready(function () {
        $("#button1").click(function (evt) {
            var files = $("#file1").get(0).files;
            if (files.length > 0) {
                var data = new FormData();
                for (i = 0; i < files.length; i++) {
                    data.append("file" + i, files[i]);
                }
                $.ajax({
                    type: "POST",
                    url: "http://localhost/WebApi/api/Fileupload/Post",
                    contentType: false,
                    crossorigin: true,
                    processData: false,
                    data: data,
                    success: function (messages) {
                        for (i = 0; i < messages.length; i++) {
                            alert(messages[i]);
                        }
                    },
                    error: function () {
                        alert("Error while invoking the Web API");
                    }
                });
            }
        });
    });

</script>

</head>
<body>
<!-- form name and controller declare  -->
<form>
    <span>Select file(s) to upload :</span>
    <input id="file1" name="file1" type="file" multiple="multiple" />
    <input id="button1" type="button" value="Upload" />
</form>
</body>
</html>

I f I am getting the issue right, you are using Microsoft's ASP.NET MVC WebAPI . In this case you should use EnableCORS option and set it in your WebAPI config as below:

Steps: 1. Install Nuget for CORS in package manager console as

Install-Package Microsoft.AspNet.WebApi.Cors

2. Add config.EnableCors in WebApiConfig

 public static void Register(HttpConfiguration config)
    {
         config.EnableCors();
    }

3. Add the EnableCors attribute in your controller as below:

 [EnableCors(origins: "*", headers: "*", methods: "*")]
 public class ValueController : ApiController

For more details refer: http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api

What you are experiencing is by default a browser security feature which blocks http requests to another web resources

you can change this default behavior if you add the flags Access-Control-Allow-Origin ; Access-Control-Allow-Methods in your web application server's response including the allowed origins (resources)

you did not specify the web application software in use (asp.net, django, node.js, ...) but for instance, this is how you support it in django