angular - 无法加载资源 : the server $%7Bthis. originUrl%7D/.auth/me:1 状态 404(未找到)

Question

我是 Angular 和网络开发的新手。我正在使用 Visual Studio Code 开发一个 Angular 应用程序并将其部署在 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 是

@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 )

但我仍然无法在主页上显示用户的名字和姓氏。 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 );
      }