使用 Angular 向 facebook oauth 发出 CORS 问题答案

【问题标题】：CORS issue to facebook oauth using Angular使用 Angular 向 facebook oauth 发出 CORS 问题
【发布时间】：2018-11-15 15:38:52
【问题描述】：

我的 API 中有用于 Facebook、Google、Twitter 的 OAuth 登录和回调方法。它是一个运行在 3000 端口上的快递应用。

我在端口 4200 上运行了另一个 angular 2 应用程序。我正在尝试调用通过http get 表达api url。它向我抛出了 CORS 错误。

请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问 Origin 'null'。 跨域读取阻止 (CORB) 阻止了 mime 类型 text/html 的跨域响应

【问题讨论】：

【解决方案1】：

CORS 的存在是为了保护您的服务器免受不需要的外部 AJAX 请求。您需要在服务器上主动启用 CORS 才能使用它。

由于您没有指定服务器类型，here's how 在 IIS 上执行此操作，here's how 在 Apache 上执行此操作。如果您使用不同类型的服务器，则应在该特定服务器类型上查找“启用 CORS”。

最佳做法是只允许您想要打开的域的 CORS，而不是允许所有内容 (*)，因为这会增加您服务器的潜在漏洞。

【讨论】：

【解决方案2】：

使用ExpressJS CORS middleware 允许跨域请求（CORS explained here）

【讨论】：

【解决方案3】：

大多数时候，解决问题的最简单方法是更新服务器。大多数服务器端技术都提供了快速配置 CORS 的支持。例如，对于 Node 和 ExpressJS，它只包括安装 CORS 中间件并在初始化 Express 应用程序时使用它：

var express = require('express') , cors = require('cors') , app = express();app.use(cors()); 
(...)

关于 CORS，请参考我发现有用的以下链接： https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

【讨论】：