java - 如何使用 Angular 6 绕过跨源错误(Firefox CORS 错误、Chrome 预检错误)

Question

我正在开发一个前端，用作rest-api 的客户端。使用 Angular 6。

问题是，当我使用 HttpClient 发送 POST 请求时，出现此跨源错误。我的代码:

服务:

export class ApiConfigLogin {
      constructor(private http: HttpClient,
        private dataSrvc: DataService) {}

      private _url = this.dataSrvc.getMainUrl() + '/sec-login';

      private options = {
        headers: new HttpHeaders().set('Content-Type', 'application/json')
      };
      getResults(reqbody): Observable < ApiConfigLoginInterface > {
        console.log(this._url);
        return this.http.post < ApiConfigLoginInterface > (this._url, reqbody, this.options);
      }
    }

组件.ts

this._ApiConfigLogin.getResults(body)
      .subscribe(data => {
        this.enableForms();
        if (data.status === 401) {
          this.lowerMessage = data.message;
        } else {
          console.log(1);
        }
      });

在火狐浏览器中:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://8888.8888.8888.8888:8888/address/sec-login. (Reason: CORS request did not succeed).

在谷歌浏览器中:

Failed to load http://8888.8888.8888.8888:8888/address/sec-login: Response for preflight is invalid (redirect)

我已经测试了允许对我的浏览器进行控制扩展。很高兴知道我有一个内容类型 header :

Answer 1

有很多方法可以解决这个问题；请参阅this在 GitHub 上了解如何处理 CORSS 客户端:

JSONP

WARNING: This isn't allowed on every API and may break when calling certain APIS

You can bypass CORS in production using JSONP which stands for JSON with Padding and is kinda also a 'hack'. But it is a widely used hack which many APIs support. You are not sending a pure JSON-request but you are wrapping your data in a function that gets evaluated. JSONP explained in the link below:

或使用代理:

Proxy

WARNING: Great services, but you are dependent on these services to work, if they break or go down, so does your app

You can use a service that proxies your request and automatically enable CORS for your:

• https://crossorigin.me/
• https://cors-anywhere.herokuapp.com/
• More Proxies here

然后，您必须通过将这些 URL 之一添加到您的请求来调用您的 API，例如:

• https://crossorigin.me/http://yourapi.com
• https://cors-anywhere.herokuapp.com/http://yourapi.com