Prisoner ZERO Prisoner ZERO - 2 months ago 6x
jQuery Question

Web API URL behaves differently between browsers

I am using jQuery to make some Web API calls on my site.

  • When I test using Chrome, it works just fine

  • When I test using IE 11, it fails as a 404

I am noticing IE 11 is putting the subsite name into the URL for me, but Chrome does not, which explains why IE 11 displays a 404.

Q: How do I fix this so the browser doesn't matter?


type: 'GET',
data: {},
url: 'outboundevents/api/outboundevent/actions/ping',
contentType: 'application/x-www-form-urlencoded; charset=UTF-8'

The Tools 'NETWORK' Tab Reports:


This is the same for both browsers

Internet Explorer

Notice how IE 11 puts the site name twice...



It's possible IE is treating outboundevents as a directory, where Chrome is treating it as a file. If that happens, then relative paths will be different, since IE thinks you're appending to outboundevents, and Chrome thinks you're replacing it. Only way I can think this would happen is if you have a trailing slash in IE and not in Chrome in the main URL bar.

To avoid issues using relative URLs, you should let the application build the URL whenever possible.

Assuming you're using ASP.NET MVC on the web application:

If your javascript is in the page, you could do it there:

    url: "@Url.Content("~/outboundevents/api/outboundevent/actions/ping")"

If the javascript is in a separate file, then you can define the URL on the layout page or somewhere else in the HTML, then retrieve it:

<input type="hidden" id="ping-action-url" value="@Url.Content("~/outboundevents/api/outboundevent/actions/ping")">

    url: jQuery("#ping-action-url").val()

Instead of individual hidden fields, you could write these in global javascript variables, or just write the root on the layout page and concatenate the root with a local URL inside your script file.