Consuming WCF service in angular in XML format

Question

I have a MediaServiceLoop.svc file that has a function GetMediaLoops that looks like this `

[WebInvoke(Method = "POST",
     BodyStyle = WebMessageBodyStyle.Wrapped,
     ResponseFormat = WebMessageFormat.Xml)]
        public string GetMediaLoops()
        {
            string strFileName = "GetMediaLoops_response.xml";
            string strResult = GetFileData(strFileName);
            return strResult;
        }`

The angular side of code looks like this `

mainApp.factory('MediaService', ['$http', function ($http) {

    var factory = {};
    factory.getMediaLoops = function () {

        return $http.post("http://localhost:62467/MediaLoopService.MediaLoop.svc/GetMediaLoops");
    }
    return factory;}]);

Controller code:

MediaService.getMediaLoops()
            .then(function (response) {
                $scope.media = response.data;
            }, function (error) {
                $scope.status = 'Unable to load customer data: ' + error.message;
            });

`

I am able to get a response both in Postman and Chrome Network (),however I do get the error of "No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:2206' is therefore not allowed access." and code flow skips the response and error block in the getMediaLoops angular call.

I have also added in Global.asax file the following piece of code for the above error but still get the above error,Any help would be appreciated

 protected void Application_BeginRequest(object sender, EventArgs e)
        {
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "http://localhost");
            if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
            {
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "POST, PUT, DELETE");

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

        }

Michael Kokorin · Accepted Answer · 2017-11-08 09:04:02Z

1

Try to add the following configuration in web.config for service:

<system.webServer>
    <httpProtocol>
        <customHeaders>
             <add name="Access-Control-Allow-Origin" value="*" />
        </customHeaders>
    </httpProtocol>    

     <modules runAllManagedModulesForAllRequests="true"/>  
     <directoryBrowse enabled="true"/>
</system.webServer>

answered Nov 8, 2017 at 9:04

Michael Kokorin

5042 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tanzeel Shaikh · Accepted Answer · 2017-11-11 06:30:02Z

Though above answer worked fine when passing no params in the API,BUT for passing data the WCF failed to respond to OPTIONS request as a part of preflight request created by browser and threw an error "Method not allowed:405", therefore the permanent solution was to make a Global file in Service project and check for OPTIONS request and add headers accordingly

public class Global : System.Web.HttpApplication
{

    protected void Application_BeginRequest(object sender, EventArgs e)
    {
        HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
        if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
        {
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept");
            HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
            HttpContext.Current.Response.End();
        }
    }

}

Collectives™ on Stack Overflow

Consuming WCF service in angular in XML format

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related