如何使用 Angular 6 绕过跨源错误（Firefox CORS 错误、Chrome 预检错误）

Question

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

问题是当我使用 HttpClient 发送一个发布请求时，我得到了这个跨源错误。 我的代码：

服务：

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

有办法解决它；关于如何处理 CORSS 客户端，请参阅 GitHub 上的this：

JSONP

警告：并非每个 API 都允许这样做，并且在调用某些 API 时可能会中断

您可以在生产环境中使用 JSONP 绕过 CORS，JSONP 代表 JSON 使用 Padding 并且有点像“hack”。但它是一种广泛使用的 hack 许多 API 都支持。您不是发送纯 JSON 请求，而是 您正在将数据包装在一个被评估的函数中。 JSONP 在下面的链接中解释：

或使用代理：

代理

警告：很棒的服务，但您依赖这些服务 工作，如果它们坏了或坏了，你的应用程序也会这样做

您可以使用代理您的请求并自动 为您启用 CORS：

• 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

Answer 2

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

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