Cannot load web api method using Backbone.js

Question

I have a blank asp.net solution with 5 different projects. One of them is asp.net web api and other one is blank web site with bunch of html pages. I am using backbone.js/jQuery to make calls to the web api within the solution. My blank web site is running on different port and my web api is running on different port.

//Collection
var AuditsCollection = Backbone.Collection.extend({

    url: 'http://localhost:56501/api/searchaudits',

    sync: function (method, model, options) {
                if (!options.crossDomain) {
                    options.crossDomain = true;
                }

                options.timeout = 1000;
                alert(method + ": " + JSON.stringify(model));
                return Backbone.sync(method, model, options);
            },
});
var audits = new AuditsCollection();

// Model
var Audit = Backbone.Model.extend({ });
var audit = new Audit({ auditNumber: "A12" });

audits.add(audit);

// POST CALL - I am sending this model and expecting back another JSON object in response.

 audit.save({}, {

    success: function (response) {
        alert("Got audits successfully" + response);
    },
    error: function (response) {

        alert("Error.. Go home now");
    }
});

I still get this error

XMLHttpRequest cannot load http://mydomain:56501/api/searchaudits. Request header field Content-Type is not allowed by Access-Control-Allow-Headers.

Do you get a useful result by browsing to the same URL via the address bar? — damienc88
– damienc88, Commented May 21, 2013 at 22:46
Yes, it's a POST, so when I make a POST call using Fiddler I get response back. — Harish
– Harish, Commented May 21, 2013 at 22:54
But your code isn't attempting to POST, because you're calling auditsCollection.fetch. Am I missing something here? Can you attempt to breakpoint your WebAPI project, or run elmah to see what's happening server-side? — damienc88
– damienc88, Commented May 21, 2013 at 23:26
Good catch, I updated my code and now I am getting the following OPTIONS localhost:56501/api/searchaudits 405 (Method Not Allowed) XMLHttpRequest cannot load /api/searchaudits. Request header field Content-Type is not allowed by Access-Control-Allow-Headers — Harish
– Harish, Commented May 22, 2013 at 10:58

Harish · Accepted Answer · 2013-05-22 11:16:01Z

I think I figured out what the issue is. The project is setup in the following structure.

Error:

-- Solution

-- Project 1 (Web API) - running on `http://localhost:80/api`

-- Project 2

-- Project 3

-- Project 4 (Views) - running on `http://localhost:3000/`

So when I started making ajax requests, it started giving exceptions like

XMLHttpRequest cannot load http://localhost:80/api/searchaudits. Request header field Content-Type is not allowed by Access-Control-Allow-Headers.

OPTIONS localhost:80/api/searchaudits 405 (Method Not Allowed)

XMLHttpRequest cannot load /api/searchaudits

I did not know that it is going to consider domains with different ports ad different domains.

Solution:

Override Backbone.Sync method - reference

In your Web Api projects web.config file, add the following

<system.webServer>
    <httpProtocol>
          <customHeaders>
            <add name="Access-Control-Allow-Origin" value="*" />
            <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept"/>
          </customHeaders>
        </httpProtocol>
</system.webServer>

There are answers in StackOverflow regarding this issue in bits and pieces, but this is an effort to put the complete solution together in one place.

Collectives™ on Stack Overflow

Cannot load web api method using Backbone.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related