0

I am using Angular 5 to send post request to send SMS through Bulksms : http://bulksms.com/

When making the request from Angular (client), I am facing this issue :

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

How can I correct this issue in BulkSMS ?

Regards,

Wael Abdeen
  • 45
  • 7
  • CORS issues are related to your API, not to your client. And reaching an URL from your browser is not the same thing as using an API in your JS. Same goes for Postman and Angular. Please edit your question with the correct tags and what you did with your API (or I will have to do it for you) –  Jun 26 '18 at 08:45
  • I can consume the link directly without any CORS issue from my browser. – Wael Abdeen Jun 26 '18 at 08:46
  • And as I said, this isn't the same thing as consuming an API from JS. –  Jun 26 '18 at 08:47
  • I faced similar issue, but the solution is we need to enabled the CORS in API side. I have resolved similar issue in C# side. See this https://efficientuser.com/2018/06/14/cors-origin-problem-in-my-c-angular-application/ – Pandiyan Cool Jun 26 '18 at 08:47
  • It does not make sense to add `Access-Control-Allow-Origin` from origin's side. There has to be a setting in the API's side. – Arnaud Denoyelle Jun 26 '18 at 08:48
  • Dears, this is service provided by bulksms and it is working well from my browser, I need to resolve from Angular side. when I add plugin in my browser to enable CORS, it working fine from angular, how to overcome this issue without enable CORS plugin – Wael Abdeen Jun 26 '18 at 08:50
  • **THIS IS NOT AN ANGULAR ISSUE**. Directly from **[MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)** : `For security reasons, browsers restrict cross-origin HTTP requests initiated from within scripts`. Typing in an URL isn't a script, making an Angular HTTP call is. –  Jun 26 '18 at 08:52
  • so, for development stage I can use plugin but what about production env? – Wael Abdeen Jun 26 '18 at 08:54
  • You need to set up your API to accet your domain as a request origin. I don't know about BulkSMS, but for instance in Firebase, you can give it custom CORS rules. This must be on their website or in their doc about JS. –  Jun 26 '18 at 08:55
  • in this case, I should talk to bulksms support team – Wael Abdeen Jun 26 '18 at 08:56
  • Probably, I don't know about their documentation. What you could also do is set up a server (if you don't have one), and make the server use BulkSMS, while your client uses the server. See it as a bridge to make it work. Besides, it improves security, since your user doesn't see what requests are made (doing it from client side, your user can see you're using BulkSMS, and probably auth credentials too) –  Jun 26 '18 at 08:58

1 Answers1

0

Your browser's same-origin policy is restricting your Javascript code from accessing a third party (i.e. api.bulksms.com in this case) in the way in which you hoped to do it - and CORS (Cross-Origin Resource Sharing), which is a mechanism to relax those restrictions, is not relaxed enough to allow these requests (from you as an untrusted third party) either.

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". The Wikipedia page contains some good examples of the sorts of malicious Javascript code uses that the same-origin policy tries to limit.

It is important to note that these restrictions are only enforced by browsers: HTTP client code that is not running under a browser typically doesn't care about any of this.

For development purposes, there are some tools that can make your life easier - for example, you could use live-server to run a simple HTTP server which serves up your static files, while also using its --proxy option to route requests to api.bulksms.com and solve your same-origin policy problem in the process.

For production, a typical solution is to route your AJAX requests, which are destined for the third party service, via your own server (the one serving up your Javascript files to your browser), or a reverse proxy (which would front both your own and the third party service). If there is a server side to your application, you can make the HTTP requests to api.bulksms.com from there, using an HTTP client, and then have your Javascript code talk to your own server, to indirectly make the requests to bulksms.com. This also gives you the opportunity to add authentication headers on your server side, without your Javascript code ever having to know them (e.g. if you have one bulksms.com account, and many users able to use that account via your Angular app, but who should not know your credentials). Similarly, you could impose limits on what your Angular users can do in this way (e.g. to limit the number of SMSs they could each send per day).

PaoloC
  • 519
  • 5
  • 5