时间戳

首页 > 解决方案 > 错误：使用 Vue.js 在 ASP.NET Core 中请求失败，状态码为 404

c# - 错误：使用 Vue.js 在 ASP.NET Core 中请求失败，状态码为 404

问题描述

页面中只有一个按钮和脚本index.cshtmp。在我的 main.Js 中，我有一个名为 getItems() 的方法，用于检索所有项目。为此，我使用了 Vue.js 和 Axios。我getItems在 .It 中调用了方法Admincontroller，这是一个 GET 请求。但它给了我控制台错误 Error: Request failed with status code 404。我在管理控制器中添加了一个刹车点，但我的请求没有进入控制器内部。请帮我解决这个问题。谢谢

**index.cshtml**
<div id="app">

    <button v-on:click="getItems">Get Items</button>

</div>

@section scripts{
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="~/js/Admin/main.js"></script>

}

main.js

var app = new Vue({
    el: '#app',
    data: {
        price: 0,
        showPrice:true,
        loading: false
    },
    methods: {
        getItems() {
            this.loading = true;
            axios.get('/Admin/Items')
                .then(res => {
                    console.log(res);
                })
                .catch(err =>{
                console.log(err);
                })
                .then(() => {
                    this.loading = false;
                })

        }

    }
});

管理员控制器

using Microsoft.AspNetCore.Mvc;
using PracticalTest.Application.Admin;
using PracticalTest.Database;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace PracticalTest.UIs.Controllers
{
    [Route("[controller]")]
    public class AdminController : Controller
    {
        private ApplicationDbContext _ctx;
        public AdminController(ApplicationDbContext ctx)
        {
            _ctx = ctx;
        }

        [HttpGet("Items")]
        public IActionResult GetItems() =>Ok( new GetItems(_ctx).Do());

        [HttpPost("Items")]
        public IActionResult CreateItem(CreateItem.ItemViewModel vm) =>Ok( new CreateItem(_ctx).Do(vm));

        [HttpDelete("Items/{id}")] 
        public IActionResult DeleteItem(int id) =>Ok( new DeleteItem(_ctx).Do(id));

        [HttpPut("Items")]
        public IActionResult UpdateItem(UpdateItem.ItemViewModel vm) =>Ok( new UpdateItem(_ctx).Do(vm));
       
    }
}

标签： c#vue.jsasp.net-core

解决方案

我在 Admincontroller 中调用了 getItems 方法。这是一个 GET 请求。但它给了我控制台错误错误：请求失败，状态码为 404。我在管理控制器中添加了一个刹车点，但我的请求没有进入控制器内部。

如果您在同一个项目中混合使用 Razor 页面和 MVC（或 API），请确保您注册了所需的服务，并添加了所需的中间件。

public void ConfigureServices(IServiceCollection services)
{
    services.AddRazorPages();
    services.AddControllers();

    //if mix MVC feature, need regiester this service
    //services.AddControllersWithViews();

    //...
    //other sevices you need
    //...
}

// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    //...
    //other required middleware(s) here
    //...

    app.UseRouting();

    //...

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapRazorPages();

        endpoints.MapControllers();

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

推荐阅读