Question

我想从API获取数据。要获取数据，您需要通过以下条件：U需要使用令牌。此令牌仅对特定公共IP有效。你需要使用承载认证方案来获取数据。现在我想尝试一下。并使用以下代码在本地启动我的应用程序：`

 public static USERTOKEN: string = '***';

  constructor(private http: HttpClient) {
  }

  ngOnInit() {
    const httpOptions = {
      headers: new HttpHeaders({
        'Authorization': ' Bearer ' + AppComponent.USERTOKEN
      })
    };
    this.http.get('https://developer.clashofclans.com/clans/%2388GL8202', httpOptions).subscribe(data => {
      console.log(data);
    });
  }
}
`

当然我在我的模块类中添加了httpClientModule作为导入。但是我收到以下错误：Failed to load resource: the server responded with a status of 403 (Forbidden) localhost/:1 Failed to load https://developer.clashofclans.com/clans/%2388GL8202: 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. The response had HTTP status code 403.

我做错了什么？持票人是否错误？

Answer 1

我有点晚了，但解决方案是：使用 proxy-config.json 启动Angular应用程序，并使用api的目标网址：

  "/v1": {
    "target": "https://api.clashofclans.com",
    "secure": true,
    "changeOrigin": true
  }

然后在 package.json 上添加“开始”脚本的代理参数：

"scripts": {
  "ng": "ng",
  "start": "ng serve --proxy-config proxy.conf.json",
  "build": "ng build --prod",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
}

Answer 2

你正在做的错误是 1.您正尝试从本地环境调用公共API。从这个错误消息可以看出它。

因此，

'http://localhost:4200'不允许访问。响应的HTTP状态代码为403.

由于CROS权限问题，无法从localhost以编程方式访问您的方案。

将测试代码移至公共域，然后在后端将该域列入白名单。

Answer 3

似乎不是前端问题，但NO Access-Control-Allow-Origin错误可能有不同的原因。我认为您应该在后端代码或Web服务器配置中管理它。例如，在apache中，如果您有.htaccess文件，则可以在那里管理您的权限。还要确保您的后端不需要额外的标题才能识别其客户端。

角度5从Api-No＆＃39; Access-Control-Allow-Origin＆＃39;获取数据。头

3 个答案: