如何使用 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);      }    }组件.tsthis._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.com

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

Answer 2

当您使用与用于加载 Web 应用程序的 URL 不同的 URL 调用服务时，会发生 CORS 错误，直到并包括端口。这是浏览器内置的安全功能。

为了避免这种情况，您的服务器需要通过添加标头来允许跨域请求。您可以手动添加标题，这需要一些努力，或者，如果您使用的是 Spring 之类的东西，则会有一个注释。