angular 5 从 Api 获取数据- 否 'Access-Control-Allow-Origin' header

Question

我想从 API 中获取数据。要获取数据，您需要满足以下条件：您需要使用令牌。此令牌仅对特定 public 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 作为导入 class。但是我收到以下错误：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

似乎不是 front-end 问题，但是 NO Access-Control-Allow-Origin 错误可能有不同的原因。我认为您应该在 back-end 代码或 Web 服务器配置中对其进行管理。例如在 apache 中，如果你有一个 .htaccess 文件，你可以在那里管理你的权限。还要确保您的 back-end 不需要额外的 headers 来识别其客户。

Answer 2

你犯的错误是 1. 您正在尝试从本地环境调用 public API。从此错误消息中可以明显看出。

'http://localhost:4200' 因此不允许访问。响应具有 HTTP 状态代码 403。

由于 CROS 权限问题，无法在您的方案中从本地主机以编程方式访问。

将您的测试代码移至 public 域，然后将该域列入您后端的白名单。

Answer 3

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

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

然后在 package.json 上为 "start" 脚本添加代理参数：

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

angular 5 从 Api 获取数据- 否 'Access-Control-Allow-Origin' header

angular 5 fetch data from Api- No 'Access-Control-Allow-Origin' header

api

typescript

bearer-token

angular