Не удалось загрузить ресурс: сервер $% 7Bthis.originUrl% 7D / .auth / me: 1, состояние 404 (не найдено)

Question

Я новичок в угловой и веб-разработке. Я использую код Visual Studio для разработки углового приложения и развертывания его на Azure. Я пытался найти решение по всем соответствующим сообщениям об указанной ниже ошибке, но не смог найти решение. Я пытаюсь показать имя и фамилию зарегистрированного пользователя на домашней странице. Пользователь входит в систему с помощью Azure AD B2C. Когда я запускаю свое приложение, я получаю следующую ошибку в консоли браузера

Failed to load resource: the server $%7Bthis.originUrl%7D/.auth/me:1 responded with a status of 404 (Not Found)

Я пытаюсь показать имя и фамилию пользователя на веб-странице. файл user.services.ts имеет такой код

 export class UserService {
 private originUrl: string;
 private aadUser: AADUser;

      constructor(private http: Http, @Inject('ORIGIN_URL')originUrl: string) {
     this.originUrl = originUrl;
 }
 public getUser(): Observable<User> {
    return this.http.get('${this.originUrl}/.auth/me')

home.component.ts is

@Component({
selector: 'app-home',
templateUrl: './home.component.html',
})
export class HomeComponent implements OnInit {
constructor(private userService: UserService) { }
user: User;
ngOnInit(): void {
this.userService.getUser().subscribe(user => this.user = user );
}

app.module.ts

imports: [
BrowserModule,
FormsModule, 
HttpClientModule,
HttpModule,
RouterModule.forRoot([
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'search', component: SearchComponent },
  { path: 'fetch-data', component: FetchDataComponent },
  { path: '**', redirectTo: 'home' }
]),
CommonModule
],
providers: [{provide:'ORIGIN_URL', useValue: 'https://projectname- 
username.azurewebsites.net'}],
bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

Используются следующие шаги для устранения ошибок,

1. Следующая ошибка устранена из комментария @ user184994

   Failed to load resource: the server $%7Bthis.originUrl%7D/.auth/me:1 
   responded with a status of 404 (Not Found)
   

2. Вторая ошибка

   No 'Access-Control-Allow-Origin' header is 
   present on the requested resource. Origin 'localhost:5001'; is therefore 
   not allowed access._
   

   разрешено добавлением расширения CROS (https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en-US)

Но я все еще не могу отобразить firstName и lastName пользователя на домашней странице. home.component.html

    <script  src="../../Jquery/prettify.js"></script>
    <h1>Hello, {{user?.firstName}} {{user?.lastName}}!</h1>

код user.services.ts -

    export class UserService {
    private originUrl: string;
    private aadUser: AADUser;

      constructor(private http: Http, @Inject('ORIGIN_URL')originUrl: string) {
     this.originUrl = originUrl;
   }
   public getUser(): Observable<User> {
    return this.http.get(`${this.originUrl}/.auth/me`)
        .map(response => {
            try {
                this.aadUser = response.json()[0] as AADUser;

                let user = new User();
                user.userId = this.aadUser.user_id;

                this.aadUser.user_claims.forEach(claim => {
                    switch (claim.typ) {
                        case 
             "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/givenname":
                            user.firstName = claim.val;
                            break;
                        case 
             "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/surname":
                            user.lastName = claim.val;
                            break;
                    }
                });

                return user;
            }
            catch (Exception) {
                 console.log('Error: ${Exception}');
            }
        }).catch(this.handleError);
       }
       private handleError(error: any): Promise<any> {
       console.error('An error occurred', error); // for demo purposes only
       return Promise.reject(error.message || error);
      }
      }

home.component.ts

      @Component({
      selector: 'app-home',
      templateUrl: './home.component.html',
      })
      export class HomeComponent implements OnInit {
      constructor(private userService: UserService) { }
      user: User;
      ngOnInit(): void {
      this.userService.getUser().subscribe(user => this.user = user );
      }