Question

我正在制作一个有角度的网络应用，我正在向Firebase上托管的API发出HTTP请求以使用帖子请求获取数据，但是当页面加载时我收到以下错误

Failed to load https://chat-f0225.firebaseapp.com/: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access

这是我的代码

user.service.ts

import { Injectable } from '@angular/core';
import { User } from '../model/User';
import { Methods } from '../model/Method';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/Observable/of';
import {  HttpClient , HttpHeaders } from '@angular/common/http'
@Injectable()
export class UserService {
  tickets:User[];
  method:Methods;
  postUrl = 'https://chat-f0225.firebaseapp.com'
  data:Observable<any>;
  httpOptions = {
    headers : new HttpHeaders({'Content-Type':'application/json',
    'Access-Control-Allow-Origin': '*'})
  };
  constructor(private http: HttpClient) { }
  getTickets(method:Methods):Observable<User[]>
  {
    return this.http.post<User[]>(this.postUrl,method,this.httpOptions);
  }
}

User.component.ts

import { Component , OnInit} from '@angular/core';
import { User} from '../../model/User';
import { UserService } from '../../services/user.service';
import { Methods } from '../../model/Method';
@Component({
    selector : 'app-user',
   templateUrl : './user.component.html',
   styleUrls : ['./user.component.css'],
})

export class UserComponent implements OnInit{
    //Properties
    tickets : User[];
    method:Methods;

    constructor(private userService: UserService)
    {
    }
    ngOnInit()
    {
        this.method={name:"FetchTickets",userId:"dke1kor"};
        console.log("here");

        this.userService.getTickets(this.method as Methods).subscribe(ticket =>{
            console.log(ticket);

        })
    }
}

如何访问该API？

Answer 1

您遇到了CORS的问题。必须在服务器端正确处理CORS。服务器必须发送“Access-Control-Allow-Origin”，其中访问主机列入白名单，或*发送给所有主机。

有关详细信息，请参阅https://enable-cors.org/。

使用angular来向api发出http请求时出错

1 个答案: