Question

我正在尝试从我创建的WebApi项目中检索数据。我已经构建了一个新的Angular 2应用程序，它将通过Api调用获取此数据。

已经在WebApi项目中准备好了数据。如果我使用postman来调用Api，我会得到类似这样的数据：

[
{
  "Id": 1,
  "BookingNr": "123456789",
  "OutboundDate": "2016-02-05T00:00:00",
  "ReturnDate": "2016-04-04T00:00:00",
  "Route": "Oslo - Stockholm",
  "Passengers": "1 Adult and 1 Child",
  "VehicleType": "Car 1.85m x 4.5m"
},
{
  "Id": 2,
  "BookingNr": "234567891",
  "OutboundDate": "2016-03-05T00:00:00",
  "ReturnDate": "2016-04-04T00:00:00",
  "Route": "Stockholm - Oslo",
  "Passengers": "2 Adult and 1 Child",
  "VehicleType": "Car 1.85m x 4.5m"
}
]

在我的angular 2项目中，我有一个主要组件，它调用服务从api获取数据。

主要内容：

    @Component({
    selector: 'reservation-component',
    providers: [...FORM_PROVIDERS, BookingsService],
    directives: [...ROUTER_DIRECTIVES, CORE_DIRECTIVES, BookingsListComponent ],
    styles: [`
        agent {
            display: block;
        }
    `],
    pipes: [],
    template: `
       ***No Html in this example***
  `,
  bindings: [BookingsService],
})

@Injectable()
export class BookingsComponent {

    bookings: Array<amendmentBookings> = [];

    constructor(public bookingsService: BookingsService) {

        this.bookings = this.bookingsService.getBookings();

    }

}

然后是服务，进行通话。

服务

    @Injectable()
export class BookingsService {

    constructor(private router: Router, public http: Http) {
        console.log('Booking Service created.', http);
    }

    getBookings(): Array<amendmentBookings> {

        var bookingsRetrieved: Array<amendmentBookings>

        this.http.get('http://localhost:55350/api/bookings')
            .map(res => res.json())
            .map((bookings: Array<any>) => {
                let result: Array<amendmentBookings> = [];
                if (bookings) {
                    bookings.forEach(booking => {
                        result.push(
                            new amendmentBookings(
                                booking.bookingNumber,
                                new Date(booking.outboundDate),
                                new Date(booking.returnDate),
                                booking.route,
                                booking.passengers,
                                booking.vehicleType))
                    });
                }

                return result;

            }).subscribe(data => {
                bookingsRetrieved = data;
                console.log(bookingsRetrieved)
            },
            err => console.log(err));

        return bookingsRetrieved;
    }

}

export class amendmentBookings {

    constructor(
        public bookingNumber: string,
        public outboundDate: Date,
        public returnDate: Date,
        public route: string,
        public passengers: string,
        public vehicleType: string
    ) { }
}

当我尝试调用它时，我收到以下错误：

XMLHttpRequest无法加载http://localhost:55350/api/bookings。 No＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源上。起源＆＃39; http://localhost:3000＆＃39;因此不允许访问。

已尝试搜索问题，但只能发现某些内容阻止了请求，但没有解决方案..

这就是我的bookingsController在Visual Studio中的样子（我使用的是实体框架）

BookingController

public class BookingsController : ApiController
{
    private BookingsContext db = new BookingsContext();

    // GET: Bookings
    public IEnumerable<Booking> Get()
    {
        return db.Bookings.ToList();
    }
}

Answer 1

如果您希望能够通过托管在其他域上的javascript代码调用它，则需要在Web API上enable CORS。

所以基本上在您的Web API引导脚本中，您可以调用：

config.EnableCors();

然后用适当的属性装饰你的控制器：

[EnableCors(origins: "*", headers: "*", methods: "*")]
public class BookingsController : ApiController
{
    ...
}

当然，为所有域（*）启用CORS会带来安全隐患，因此您可能只想为托管javascript调用代码的域选择性地启用它。

No＆＃39; Access-Control-Allow-Origin＆＃39;从WebApi到angular 2应用程序

1 个答案: