如何从ABP Angular 6进行外部REST调用

时间:2019-05-17 04:14:28

标签: angular cors aspnetboilerplate abp

我在与AspNetBoilerplate angular app中的公共 REST API 集成时遇到问题。

无论我调用哪种外部服务,我都会收到 CORS错误,因为该调用在标头中获得了编译指示。

这是我在控制台中看到的错误:

from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

这发生在最简单的通话中:

this.http.get('http://maps.google.com/places').subscribe(result => console.log(result));

我感觉是HTTP interceptor在这里困扰我,但我需要有关如何以ABP方式进行此操作的指导。

我已经使角度injectable services包含了我的HTTP客户端请求。

1 个答案:

答案 0 :(得分:0)

您需要在Projectname.Web.Host项目中打开appsettings.json,并添加实际上要连接到的主机,并插入CorsOrigins属性。您的情况是http://localhost:4200

async componentWillMount(){
    Linking.getInitialURL().then(url => {
        if (url) {
          this.navigate(url);
        }
      });
  }

  async navigate (url) {
    const route = url.replace(/.*?:\/\//g, '');
    const id = route.match(/\/([^\/]+)\/?$/)[1];
    const routeName = route.split('/')[0];

    if (routeName === 'code') {
      const { navigate } = this.props.navigation;
      this.setState({ code: id });
      navigate({
            routeName: 'Pick',
            params: {
                code: id
            }
        })

  }

  componentWillUnmount() {
    Linking.removeEventListener('url', this.handleOpenUrl);
  }

  handleOpenUrl = (event) => {
    this.navigate(event.url);
  }