Ajax call going to the wrong host in my Asp.Net application

Question

I am trying to make an API call in an ASP.Net application. This is what my AJAX call looks like:

$.ajax({
        url: "/foo/bar",
        type: "POST",
        data: JSON.stringify(data),
        contentType: "application/json; charset=utf-8",
        processData: false
    }).done(function (data) {
    }).fail(function (jqXHR, textStatus) {
    });

However, when I click the button to make this request, I get a 404 back because the request is going to this URL:

https://localhost:44303/foo/bar

The request should be going to the URL below:

https://localhost:44360/api/foo/bar

It's worth noting that I did not write this application, and am somewhat new to Asp.NET applications. I'm seeing other AJAX calls in this application to other API endpoints that look basically identical to mine that are going to the correct host in addition to the correct endpoint. I'm clearly missing a step here, but I have no idea what that might be. This is probably simple to fix. I just don't know the magic words to search for.

Answer 1

I was able to resolve my issue by changing my strategy.

It turns out I did not understand how other AJAX calls in my application were being handled. They were being handled using handler methods within the cshtml.cs files for the HTML pages.

I put this call into my JS file:

$.ajax({
            url: "/Home?handler=Foo",
            type: "GET",
            contentType: "application/json; charset=utf-8",
            processData: false
        }).done(function (response) {
        }).fail(function (jqXHR, textStatus) {
        });

And then in my Home.cshtml.cs file, I put this method:

public async Task<IActionResult> OnGetExport()
    {
        _logger.LogError("You did the thing correctly!");
        return StatusCode(418);
    }

Now, when I click the button on the webpage, I am getting a 418 error back.