使用 Angular 向 facebook oauth 发出 CORS 问题

Posted 2023-02-22

【中文标题】使用 Angular 向 facebook oauth 发出 CORS 问题

【英文标题】：CORS issue to facebook oauth using Angular

【发布时间】：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 的跨域响应

【问题讨论】：

OAuth 通常必须通过重定向而不是 Ajax 来完成

你在你的服务器上实现了cors吗？

***.com/a/43276710/441757

OAuth 无论如何都需要用户操作，所以不要使用 AJAX。

【参考方案1】：

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

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

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

【讨论】：

也适用于 Express：app.use(cors());

【参考方案2】：

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

https://github.com/expressjs/cors

【参考方案3】：

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

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

更多详情请参考以下链接： http://restlet.com/company/blog/2016/09/27/how-to-fix-cors-problems/

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