Маршрутизатор Angular 6 возвращает index.html для вызова API в asp.net mvc - PullRequest
Новая
       17

Маршрутизатор Angular 6 возвращает index.html для вызова API в asp.net mvc

0 голосов
/ 06 сентября 2018

Здравствуйте. Я создаю угловое приложение с ASP.NET MVC и использую веб-интерфейс API для передачи данных, прежде чем интегрировать угловой с моим проектом asp.net, вызовы API работали нормально, но после того, как я настроил угловой с asp.net mvc проект, вызовы API не работают сейчас. Возвращает статус HTTP 200 означает, что вызов в порядке, но ответ enter image description here

И его заголовки ..

enter image description here

Угловая составляющая .. 

apiCall() {
    this.http.get('api/Angular').subscribe((data) => {
        console.log(data);
    })
}

HTTPService 

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';

@Injectable()

export class HttpService {

local: string = "http://localhost:4545/"

constructor(private http: HttpClient) { }


get(url: string): Observable<any>{
    return this.http.get(this.local + url);
}

post(url: string, data: any): Observable<any> {
    return this.http.post(url, data);
}

put(url: string, data: any): Observable<any> {
    return this.http.put(url, data);
}

}

Это мой макет, где angular настроен для загрузки в проект MVC 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My ASP.NET Application</title>
<base href="/" />
</head>
<body>

<div>
    @RenderBody()
</div> 
<script src="~/ClientApp/dist/BabyShared/polyfills.js"></script>
<script src="~/ClientApp/dist/BabyShared/runtime.js"></script>
<script src="~/ClientApp/dist/BabyShared/styles.js"></script>
<script src="~/ClientApp/dist/BabyShared/vendor.js"></script>
<script src="~/ClientApp/dist/BabyShared/main.js"></script>

Api Controller .. 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;

namespace BabyWeb.Api
{
    public class AngularController : ApiController
    {
        public string Get()
        {
            return "Angular";
        }
    }
}

Global.asax.cs 

public class MvcApplication : System.Web.HttpApplication
{
    protected void Application_Start()
    {
        AreaRegistration.RegisterAllAreas();
        GlobalConfiguration.Configure(WebApiConfig.Register);
        FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
        RouteConfig.RegisterRoutes(RouteTable.Routes);
        BundleConfig.RegisterBundles(BundleTable.Bundles);
    }
}

WebApiConfig.cs 

public static void Register(HttpConfiguration config)
    {
        config.MapHttpAttributeRoutes();

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );

    }

Даже если я пытаюсь получить доступ к вызову API через браузер, это не удается. Я думаю, что я испортил угловую маршрутизацию и маршрутизацию asp.net в этой конфигурации. Пожалуйста, помогите мне.

Ответы [ 2 ]

0 голосов
/ 09 сентября 2018

Были дни, когда нужно было искать решение, но довольно ясно, что я только что испортил свой конфиг urlrewrite в web.config. На самом деле, у меня возникла проблема с ошибкой 404 при перезагрузке на угловом маршрутизаторе, поэтому я переписал URL, но не думал, что мне придется игнорировать маршруты, начинающиеся с «api /», чтобы он не возвращал мне index.html .

Вот решение. 

<rewrite>
  <rules>
    <rule name="Angular" stopProcessing="true">
      <match url=".*" />
      <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" /> /// I missed this line
      </conditions>
      <action type="Rewrite" url="/" />
    </rule>
  </rules>
</rewrite>

Ссылка: https://angular.io/guide/deployment#routed-apps-must-fallback-to-indexhtml

0 голосов
/ 07 сентября 2018

Все еще не уверен, в чем проблема. Вот что вы можете попробовать, потому что я вижу, что включена маршрутизация атрибутов: 

namespace BabyWeb.Api
{
    [RoutePrefix("api/Angular")]
    public class AngularController : ApiController
    {
        [Route("")]
        public string Get()
        {
            return "Angular";
        }
    }
}

Я не уверен, что это сработает, но документация указывает на то, что атрибуты маршрутов должны превосходить маршрутизацию по умолчанию.

Можете ли вы попытаться выяснить, что возвращает index.html? Поскольку это одностраничное приложение, где-то должна быть конфигурация, которая говорит, что в основном всегда возвращают index.html, и тогда угловая маршрутизация вступит во владение. Потенциально в файле RouteConfig.cs. В любом случае, нам нужно отключить его на маршрутах / api.

...