AJAX Cross Domain Image Post to WCF Service

Question

I've been stuck for 2 days on this.

Can someone please provide an example of how to do a cross domain AJAX post to a WCF service?

I'm trying to upload an image to the WCF server.

EDIT

WCF Service:

[WebInvoke(UriTemplate = "/upload", Method = "POST", ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Wrapped), CorsEnabled]
void UploadImage(Stream image);

Ajax Call:

function UploadImage() {
        image = document.getElementById("myimage").src;
        var data = '{"image": "' + image + '"}'
        //alert(data);
        $.ajax({
            url: "http://localhost:44665/api/upload",
            type: "POST",
            contentType: "application/json",
            data: data,
            success: function (result) {
                alert("success");
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log(jqXHR.responseText);
            }
        });
    }

I can get this to work if I change the WCF paramter from Stream to string. But I need to upload an image and not a string.

I am now getting a WCF error that says:

The server encountered an error processing the request. See server logs for more details.

** Edit 2 ** I added the global.asax code mentioned in the below answer and added this to my web.config:

<configuration>
<system.web>
    <compilation debug="true" targetFramework="4.0" />
</system.web>

<system.serviceModel>
    <behaviors>
        <serviceBehaviors>
            <behavior name="myServiceBehavior">
                <servicedebug includeexceptiondetailinfaults="true" />
            </behavior>
            <behavior name="">
                <serviceMetadata httpGetEnabled="true" />
                <serviceDebug includeExceptionDetailInFaults="false" />
            </behavior>

        </serviceBehaviors>
    </behaviors>
    <serviceHostingEnvironment multipleSiteBindingsEnabled="true"
                               aspNetCompatibilityEnabled="true"/>
</system.serviceModel>
</configuration>

I now get an error in the Google Chrome console that says:

POST http://localhost:44665/api/upload 500 (Internal Server Error)

http://stackoverflow.com/questions/10763618/ajax-call-to-wcf-from-asp-net-mvc/10766937#10766937 — VJAI, Jun 07 '12 at 16:46
My issue relates to uploading an image. I am able to get ajax posts working fine with strings. But as soon as I add a parameter of type Stream to my service, the client fails to connect and I get the following error on the client: Origin http://localhost:44810 is not allowed by Access-Control-Allow-Origin. — PsychoDUCK, Jun 07 '12 at 16:59
i don't know how you are uploading an image through ajax but I have posted an answer to resolve the CORS issue though. — VJAI, Jun 07 '12 at 17:12

score 5 · Accepted Answer · edited May 23 '17 at 12:08

So you are trying to make a POST operation from JavaScript to a WCF service that is hosted in another domain. Normally you can't do that without doing some special settings in the WCF service side.

You have to add the following headers to the response from Global.asax.cs in the service side (If the service project doesn't contains Global.asax.cs create one).

protected void Application_BeginRequest(object sender, EventArgs e)
{
   //..
   EnableCrossDomainCall();
}

private void EnableCrossDomainCall()
{
    // this header tells that from any domain you can access me.
    HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");

    if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
    {
        // this one tells about the supported methods to client.
        HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods",
                      "GET, POST, OPTIONS");

        HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", 
                       "Content-Type, Accept");

        HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");

        HttpContext.Current.Response.End();
    }
}

UPDATE:

You can't just post any file through AJAX, through AJAX you can only transfer data. You can use this plugin that uses hidden iframe to upload files that imitates like AJAX.

You can handle the stream object in WCF side as in this link. Try uploading small size images first and you can control the maximum size by setting the maxRequestLength in web.config.

How do I handle the Stream object in the WCF service? I've updated my code. above — PsychoDUCK, Jun 07 '12 at 17:41

score 0 · Answer 2 · answered Jun 24 '16 at 19:44

I had this problem and tried the code did not work.

I changed the code and started to work.

                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST,OPTIONS");

                if ((HttpContext.Current.Request.HttpMethod == "OPTIONS"))
                {

                    HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept");
                    HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
                    HttpContext.Current.Response.End();
                 }

AJAX Cross Domain Image Post to WCF Service

2 Answers2