AJAX 跨域图像发布到 WCF 服务

Posted

技术标签:

【中文标题】AJAX 跨域图像发布到 WCF 服务【英文标题】:AJAX Cross Domain Image Post to WCF Service 【发布时间】:2012-06-11 17:40:27 【问题描述】:

我在这个问题上被困了 2 天。

谁能提供一个如何将跨域 AJAX 发布到 WCF 服务的示例?

我正在尝试将图像上传到 WCF 服务器。

编辑

WCF 服务:

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

Ajax 调用:

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);
            
        );
    

如果我将 WCF 参数从 Stream 更改为字符串,我可以让它工作。但我需要上传图片而不是字符串。

我现在收到一个 WCF 错误,上面写着:

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

** 编辑 2 ** 我添加了以下答案中提到的 global.asax 代码并将其添加到我的 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>

我现在在 Google Chrome 控制台中收到一条错误消息:

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

【问题讨论】:

***.com/questions/10763618/… 我的问题与上传图片有关。我能够让 ajax 帖子与字符串一起正常工作。但是,一旦我将 Stream 类型的参数添加到我的服务中,客户端将无法连接,并且客户端上出现以下错误:Access-Control-Allow-Origin 不允许 Origin localhost:44810。 我不知道您是如何通过 ajax 上传图像的,但我已经发布了解决 CORS 问题的答案。 【参考方案1】:

因此,您正在尝试从 javascript 到托管在另一个域中的 WCF 服务进行 POST 操作。通常,如果不在 WCF 服务端进行一些特殊设置,您将无法做到这一点。

您必须在服务端将以下标头添加到来自Global.asax.cs 的响应中(如果服务项目不包含Global.asax.cs,则创建一个)。

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();
    

更新:

您不能只通过 AJAX 发布任何文件,通过 AJAX 您只能传输数据。你可以使用this插件,使用隐藏iframe来上传模仿AJAX的文件。

您可以像link 那样在 WCF 端处理流对象。尝试先上传小尺寸图片,您可以通过在 web.config 中设置maxRequestLength 来控制最大尺寸。

【讨论】:

如何处理 WCF 服务中的 Stream 对象?我已经更新了我的代码。以上【参考方案2】:

我遇到了这个问题,试了下代码还是不行。

我更改了代码并开始工作。

                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 跨域图像发布到 WCF 服务的主要内容,如果未能解决你的问题,请参考以下文章

跨域 jQuery Ajax 请求和 WCF REST 服务

具有跨域 Ajax 的 WCF Web 服务不起作用

经过身份验证的服务不支持跨域 javascript 回调。通过 SSL 代理对 WCF 服务的 AJAX 查询

我们可以在跨域中使用 Jquery $.ajax() 调用通过 https 访问 WCF 服务吗?

使用 transportCredentialOnly 安全性对 RESTful WCF 服务的跨域 Ajax JSON POST 支持

如何为自托管 WCF 服务启用跨域调用