BulkSMS 上的访问控制允许来源问题

Access-Control-Allow-Origin issue on BulkSMS

我正在使用 Angular 5 发送 post 请求通过 Bulksms 发送短信:http://bulksms.com/

从 Angular(客户端)发出请求时,我遇到了这个问题:

Origin http://TTTT:4200 is not allowed by Access-Control-Allow-Origin.

如何在 BulkSMS 中解决这个问题?

此致,

您的浏览器的 same-origin 政策限制您的 Javascript 代码以您希望的方式访问第三方(即本例中的 api.bulksms.com)- 并且CORS(Cross-Origin 资源共享)是一种放松这些限制的机制,但也不够宽松以允许这些请求(来自您作为不受信任的第三方)。

Wikipedia Same-origin policy : "Under the [same-origin] policy, a web browser permits scripts contained in a first web page to access data in a second web page, but only if both web pages have the same origin. An origin is defined as a combination of URI scheme, host name, and port number. This policy prevents a malicious script on one page from obtaining access to sensitive data on another web page"。维基百科页面包含一些很好的示例,说明了 same-origin 政策试图限制的各种恶意 Javascript 代码。

重要的是要注意这些限制仅由浏览器强制执行:不在浏览器下 运行ning 的 HTTP 客户端代码通常不关心任何这些。

出于开发目的,有一些工具可以让您的生活更轻松 - 例如,您可以使用 live-server 到 运行 一个简单的 HTTP为您的静态文件提供服务的服务器,同时还使用其 --proxy 选项将请求路由到 api.bulksms.com 并在此过程中解决您的 same-origin 策略问题。

对于生产,一个典型的解决方案是通过您自己的服务器(将您的 Javascript 文件提供给您的浏览器的服务器)路由发往第三方服务的 AJAX 请求) 或反向代理(这将面向您自己的服务和第三方服务)。如果您的应用程序有服务器端,您可以使用 HTTP 客户端从那里向 api.bulksms.com 发出 HTTP 请求,然后让您的 Javascript 代码与您自己的服务器对话,从而间接地使请求 bulksms.com。这也让您有机会在您的服务器端添加身份验证 headers,而您的 Javascript 代码不必知道它们(例如,如果您有一个 bulksms.com 帐户,并且许多用户能够通过您的 Angular 应用程序使用该帐户,但谁不应该知道您的凭据)。同样,您可以限制 Angular 用户可以通过这种方式执行的操作(例如,限制他们每天可以发送的 SMS 数量)。