Question 304712 in Javascript Question posted in
A very good W3school tutorial can be found here.

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

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    The problem is that you are using a relative path instead of an absolute path.

    For ASP.NET applications(WebForms and MVC) we use relative paths only when both client and server and being served together.

    In your example, the two different ports suggest that you are running both apps separately. The only way to access the url of the web-api is to store the API base url in a global varaible and use it.

    Without more context on which sort of client app you are using I cannot point to a specific switching method, but one generic way will be as given below.

    app-config.js

    var environment = { apiBaseUrl: 'https://my-hosted-api-app.net/api/' }

    app-config.dev.js

    var environment = { apiBaseUrl: 'https://localhost:44360/api/' }

    And use it in the ajax call

    $.ajax({
        url: environment.apiBaseUrl + "foo/bar",

    Additional Info: Absolute vs relative URLs

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search