java - 如何解决 Angular 12 中的 CORS 问题？

Question

我正在开发一个 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);
    })
        
        

Answer 1

您需要设置代理配置以在本地运行应用程序。
一个简短的例子是:

// create a file proxy.config.json
{
  "/api": {
    "target": "http://example.com/", // put your actual domain
    "secure": false // true or false depending on your needs.
  }
}

然后运行您的项目，将代理 conf 传递给 ng-serve 或在 package.json 中配置它。
例如:

ng serve --proxy-config proxy.conf.json

或者

npm start -- --proxy-config proxy.conf.json

或者只是在 angular.json 中配置它。
然后，在您的代码中，删除域的使用，或者如果域与您要部署应用程序的位置不同，则使用 environment.dev.ts 将域分配给 localhost。
我指的是这个 block 中的域变量。

_login(username, password) {
    const url = this.domain + '/api/login?username='+username+'&password='+password;
    return this.http.post(url, {}, this.httpOptionsPost);
}

更多详情请查看 https://www.positronx.io/setting-up-angular-proxy-configuration-via-angular-json/和/或在官方 webpack 站点中进行高级代理配置