skip to Main Content

I am attempting to delete a row by using the id on the row. when I Execute it on Local server, it worked correctly,but on plesk server have an error.
Requests CREATE and GET worked correctly but for DELETE and UPDATE not work.

function DELETE:

onDeleteConfirmation(e) {
    e.preventDefault();
    const { id } = this.props.match.params;

    axios.delete("api/Trips/DeleteTrip/" + id).then(result => {
        this.props.history.push('/Trips')
    });
}

funtion UPDATE:

onUpdateConfirmation(e) {
    e.preventDefault();
    const { id } = this.props.match.params;
    let tripObject = {
        name: this.state.name,
        description: this.state.description,
        dateStarted: this.state.dateStarted,
        dateComplated: this.state.dateComplated
    }
    axios.put("api/Trips/UpdateTrip/"+id, tripObject).then(result => {
        this.props.history.push('/Trips')
    });
}

Controller Service:

[HttpDelete("DeleteTrip/{id}")]
    public IActionResult DeleteTrip(int id)
    {
        _service.DeleteTrip(id);
        return Ok();
    }

enter image description here
.
I use ASP.Net Core 3 and React in visual stdio.
my proble accure when I try to execute at online server Plesk.

This is Full controller:

    using Microsoft.AspNetCore.Cors;
    using Microsoft.AspNetCore.Http;
    using Microsoft.AspNetCore.Mvc;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Threading.Tasks;
    using Trips.Data.Models;
    using Trips.Data.Services;

namespace Trips.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class TripsController : ControllerBase
    {
        public ITripService _service { get; set; }

        public TripsController(ITripService service)
        {
            _service = service;
        }

        [EnableCors("AnotherPolicy")]
        [HttpGet("GetTrips")]
        public IActionResult GetTrips()
        {
            try
            {
                //throw new Exception();
                var allTrips = _service.GetAllTrips();
                return Ok(allTrips);
            }
            catch (Exception ex)
            {
                return BadRequest(ex.Message);
            }

        }

        [EnableCors("AnotherPolicy")]
        [HttpGet("SingleTrip/{id}")]
        public IActionResult GetTripById(int id)
        {
            var trip = _service.GetTripById(id);
            return Ok(trip);
        }

        [EnableCors("AnotherPolicy")]
        [HttpPost("AddTrip")]
        public IActionResult AddTrip([FromBody] Trip trip)
        {
            if (trip != null)
            {
                _service.AddTrip(trip);
            }
            return Ok();
        }

        [EnableCors("AnotherPolicy")]
        [HttpPut("UpdateTrip/{id}")]
        public IActionResult UpdateTrip(int id, [FromBody] Trip trip)
        {
            _service.UpdateTrip(id, trip);
            return Ok(trip);
        }

        [EnableCors("AnotherPolicy")]
        [HttpDelete("DeleteTrip/{id}")]
        public IActionResult DeleteTrip(int id)
        {
            _service.DeleteTrip(id);
            return Ok();
        }

    }
}

.

StartUp.cs

public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {

            services.AddControllersWithViews();

            // In production, the React files will be served from this directory
            services.AddSpaStaticFiles(configuration =>
            {
                configuration.RootPath = "ClientApp/build";
            });

            // 
            services.AddTransient<ITripService, TripService>();

            services.AddCors(options =>
            {
                options.AddPolicy("AnotherPolicy",
                    builder =>
                    {
                        builder.WithOrigins(
                                "http://hirkansolar.ir/",
                                "http://react.hirkansolar.ir/"
            )
            .AllowAnyHeader()
            .WithMethods("PUT", "DELETE", "GET", "POST");
                    });
            });

        }

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Error");
                app.UseHsts();
            }

            app.UseStaticFiles();
            app.UseSpaStaticFiles();

            app.UseRouting();

            // ----
            app.UseCors();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllerRoute(
                    name: "default",
                    pattern: "{controller}/{action=Index}/{id?}");
            });

            app.UseSpa(spa =>
            {
                spa.Options.SourcePath = "ClientApp";

                if (env.IsDevelopment())
                {
                    spa.UseReactDevelopmentServer(npmScript: "start");
                }
            });
        }
    }

2

Answers


  1. You need to add CORS headers in responses to enable DELETE requests across origins.

    https://learn.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-5.0

    In your Startup.cs:

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddCors(options => { // <--- define a policy
            options.AddDefaultPolicy(builder => {
                builder.WithOrigins(
                    "http://example.com",
                    "http://www.contoso.com"
                )
                .AllowAnyHeader()
                .AllowAnyMethod();
            });
        });
        // ...
    }
    
    
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        // ...
        app.UseRouting();
    
        app.UseCors(); // <--- enable the middleware
    
        // ...
        app.UseEndpoints(endpoints => { endpoints.MapControllers(); });
    }
    

    After you make this change, responses should include Access-Control-Allow-... headers.

    Login or Signup to reply.
  2. According to Plesk, This is because WebDAV and .NET Core IIS handlers conflict and advised to Disable WebDAV module and its headers from the website configuration.

    https://support.plesk.com/hc/en-us/articles/360008566053-HTTP-Error-405-Method-Not-Allowed-when-using-PUT-method-in-ASP-NET-or-NET-Core-application-with-Web-API

    Add the following code to your web.config file.

    <system.webServer>
       <modules>
          <!-- Remove WebDAV module so that we can make DELETE requests -->
          <remove name="WebDAVModule" />
       </modules>
    
       <handlers>
          <!-- Remove WebDAV module so that we can make DELETE requests -->
          <remove name="WebDAV" />
    
          <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModuleV2" resourceType="Unspecified" />
       </handlers>
        
       other configs here...
        
    </system.webServer>
    

    You might have to this each time before you upload the application files to Plesk panel.

    Cheers!

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search