首页 > 解决方案 > 如何解决 Angular 12 中的 CORS 问题?

问题描述

我正在开发一个 Angular 项目,我有登录页面,在提交登录 API 期间,我遇到了 CORS 错误。我也附上它的截图。任何建议将不胜感激。

 API Service.ts:

           constructor( private http: HttpClient ) { }
              httpOptionsPost = {
                headers: new HttpHeaders({
                  'Content-Type': 'application/json',
                  'Access-Control-Allow-Origin': '*',
                  'Access-Control-Allow-Credentials': 'true',
                  'Access-Control-Allow-Methods' : 'GET, POST, OPTIONS',
                  'Access-Control-Allow-Headers' : 'Origin, Content-Type, Accept, X-Custom-Header, Upgrade-Insecure-Requests',
                })
              };
        
              httpOptionsGet = {
                headers: new HttpHeaders({
                  'Content-Type': 'application/json',
                  'Access-Control-Allow-Origin': '*',
                })
              };
        
              _login(username, password) {
                const url = this.domain + '/api/login?username='+username+'&password='+password;
                return this.http.post(url, {}, this.httpOptionsPost);
              }

Login Component: 

    this.apiService._login(data.username, data.password).subscribe((resp: any) => {
          const resobj = JSON.parse(JSON.stringify(resp));
          console.log(resobj);
    })
        
        

显示错误的屏幕截图

标签: javaangularcentosrestangular12

解决方案


在您的问题中,pc_coder 的答案是正确的:cors 与后端有关。确保您允许从 api 访问请求

喜欢链接: Access-Control-Allow-Origin 标头如何工作?


推荐阅读