locked
Separate Web API and Web Form Projects And Cors Error RRS feed

  • Question

  • User1378291314 posted

    Hi guys,

    I have 3 projects in a solution( MVC , Web API and Website ). First project is Web API project. I serve json data from Web API project  and I can access the data from browser.
    When I try to get this data from Website or MVC projects I see this error :

    Failed to load resource: the server responded with a status of 500 (Internal Server Error)

    XMLHttpRequest cannot load http://localhost:58000/api/Ninjalar. Response for preflight has invalid HTTP status code 500

    project links: http://www.basariburslari.info/deneme/WebAPI_Test1.rar

    Note: I want to separate service layer an UI layer. I am seeking a project, which can separate web api,  from web site or Mvc. Please send me a link or sample project.

    My first aim is to separate front end and backend and the second is to increase performance. So i would like to ask you whether it is  good or bad? Please give me opinion. I will be very happy to know it from you. Have a nice day.

    Tuesday, October 11, 2016 11:46 AM

Answers

  • User36583972 posted

    Hi davilanka,

    From your project demo. I have made a test on my side.

    I can visit the url: http://localhost:58000/api/Ninjalar and get the correct data from Web API.

    You should call the get method from your Web API (you have defined a get method in your controller).

       $("#btnCity").on("click", function () {
                    $.ajax({
                        type: "Get", //Post
                        url: 'http://localhost:58000/api/Ninjalar',
                        data: {},
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (msg) {
                            alert("OK");
                            $('#lblVeri').text(JSON.stringify(msg));
                        },
                        error: function (msg) {
                            alert("HATA");
                            $("#lblVeri").text(JSON.stringify(msg));
                        }
                    });
    
                });

    Using HTTP Methods (GET, POST, PUT, etc.) in Web API:

    https://www.exceptionnotfound.net/using-http-methods-correctly-in-asp-net-web-api/

    Best Regards,

    Yohann Lu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, October 12, 2016 2:06 AM

All replies

  • User-654786183 posted

    Try enable CORS in the WebService app. First, add the CORS NuGet package. In Visual Studio, from the Tools menu, select Library Package Manager, then select Package Manager Console. In the Package Manager Console window, type the following command

    Install-Package Microsoft.AspNet.WebApi.Cors

    Open the file App_Start/WebApiConfig.cs. Add the following code to the WebApiConfig.Register method

    using System.Web.Http;
    namespace WebService
    {
        public static class WebApiConfig
        {
            public static void Register(HttpConfiguration config)
            {
                config.EnableCors();
    
                config.Routes.MapHttpRoute(
                    name: "DefaultApi",
                    routeTemplate: "api/{controller}/{id}",
                    defaults: new { id = RouteParameter.Optional }
                );
            }
        }
    }

    Then add the [EnableCors] attribute to your controllers.  For more info refer

    Tuesday, October 11, 2016 1:00 PM
  • User1378291314 posted

    Hi senthilwaits,

    I have already done steps you mentioned. But it still does not work. If you want to browse sample project, that is link here. http://www.basariburslari.info/deneme/WebAPI_Test1.rar

    Thanks again.

    Tuesday, October 11, 2016 4:18 PM
  • User36583972 posted

    Hi davilanka,

    From your project demo. I have made a test on my side.

    I can visit the url: http://localhost:58000/api/Ninjalar and get the correct data from Web API.

    You should call the get method from your Web API (you have defined a get method in your controller).

       $("#btnCity").on("click", function () {
                    $.ajax({
                        type: "Get", //Post
                        url: 'http://localhost:58000/api/Ninjalar',
                        data: {},
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (msg) {
                            alert("OK");
                            $('#lblVeri').text(JSON.stringify(msg));
                        },
                        error: function (msg) {
                            alert("HATA");
                            $("#lblVeri").text(JSON.stringify(msg));
                        }
                    });
    
                });

    Using HTTP Methods (GET, POST, PUT, etc.) in Web API:

    https://www.exceptionnotfound.net/using-http-methods-correctly-in-asp-net-web-api/

    Best Regards,

    Yohann Lu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, October 12, 2016 2:06 AM