如何使用 angular 6 绕过交叉原点错误

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);

        }

      });

在 Mozilla Firefox 中：

跨域请求被阻止：同源策略不允许读取位于http://8888.8888.8888.8888:8888/address/sec-login的远程资源 。（原因：CORS 请求没有成功）。

在谷歌浏览器中：

无法加载 http://8888.8888.8888.8888:8888/address/sec-login：预检响应无效（重定向）

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

Answer 1

有办法绕过它；见这在GitHub上有关如何处理绍兴德胜的客户端：JSONP警告：这在每个 API 上都是不允许的，并且在调用某些 API 时可能会中断您可以使用 JSONP 在生产中绕过 CORS，它代表 JSON with Padding，也是一种“hack”。但它是一种广泛使用的 hack，许多 API 都支持。您不是发送纯 JSON 请求，而是将数据包装在一个被评估的函数中。JSONP 在下面的链接中解释：或使用代理：代理警告：很棒的服务，但您依赖这些服务才能工作，如果它们损坏或出现故障，您的应用程序也是如此您可以使用代理您的请求并自动为您启用 CORS 的服务：https://crossorigin.me/https://cors-anywhere.herokuapp.com/更多代理在这里然后，您必须通过将这些 URL 之一添加到您的请求中来调用您的 API，例如：https://crossorigin.me/http://yourapi.comhttps://cors-anywhere.herokuapp.com/http://yourapi.com

Answer 2

当您使用与用于加载 Web 应用程序的 URL 不同的 URL 调用服务时，会发生 CORS 错误，直到并包括端口。这是浏览器内置的安全功能。为了避免这种情况，您的服务器需要通过添加标头来允许跨域请求。您可以手动添加标题，这需要一些努力，或者，如果您使用的是 Spring 之类的东西，则会有一个注释。