how to resolve No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

As I am running following set of the code

AngularJS
HTML

3. Error

@mikep how can we resolve it, would you please like to suggest me what to do? — Sikandar Sahab, Jan 01 '18 at 10:27
@BinitGhetiya yes it worked. I'm thankful to you. But now has every client to install the plugin? — Sikandar Sahab, Jan 01 '18 at 10:42
Possible duplicate of [Why does my JavaScript get a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error when Postman does not?](https://stackoverflow.com/questions/20035101/why-does-my-javascript-get-a-no-access-control-allow-origin-header-is-present) — Oleg Estekhin, Jan 01 '18 at 10:56

score 3 · Answer 1 · answered Jan 01 '18 at 10:49

Installing above mentioned plugin for chrome is not a permanent solution for your issue and you cannot ask the end user to do the same.

Best way to do is to handle it in your api code.

There are plenty of resources available to see how it is configured for various languages api. The following link will make you to understand about it and how to configure.

Why does my JavaScript get a “No 'Access-Control-Allow-Origin' header is present on the requested resource” error when Postman does not?

Binit Ghetiya · Accepted Answer · 2018-01-01T10:54:06.370

2

You can try below plugin in chrome browser: Core extension

And if you want to add on server side then on server you can add below headers (for PHP add this in index.php)

header("Access-Control-Allow-Origin:*");
header('Access-Control-Allow-Methods: GET, POST, OPTIONS, DELETE, PUT');
header('Access-Control-Allow-Headers: Origin, Content-Type, Accept, Authorization, X-Request-With, X-CLIENT-ID, X-CLIENT-SECRET');
header('Access-Control-Allow-Credentials: true');

edited Jan 01 '18 at 10:54

answered Jan 01 '18 at 10:28

Binit Ghetiya

1,919
2
21
31

thanks. It solved my problem. Now, do I need every of my clients to enable this extension? – Sikandar Sahab Jan 01 '18 at 10:40
@BadshahTracker no for implementing APIs only (development) purpose only. once you will put your application on server that time your API host and hosted application server both are same so you wont get any error. – Binit Ghetiya Jan 01 '18 at 10:42
thank you so much. I seriously appreciate your help. – Sikandar Sahab Jan 01 '18 at 10:43
If your application in under development and you want to show them to all your clients then yes they need to install that. – Binit Ghetiya Jan 01 '18 at 10:43
@BadshahTracker you are welcome, you can also UP vote the answer :) – Binit Ghetiya Jan 01 '18 at 10:44
I got what you're trying to explain to me. – Sikandar Sahab Jan 01 '18 at 10:45
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/162277/discussion-between-badshah-tracker-and-binit-ghetiya). – Sikandar Sahab Jan 01 '18 at 10:46
Thanks for sharing, needed to do it on the server side @BinitGhetiya – Mena Apr 02 '18 at 13:36

score 2 · Answer 3 · answered Jan 01 '18 at 10:35

Javascript was designed to not forward from a domain to another. You're going from localhost to another domain. There is a relatively new process to do it: Cross Origin Resource Sharing or CORS. Here, the server and client agree to permit it. It's done via headers. You need a CORS header. Here is a reference: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

how to resolve No 'Access-Control-Allow-Origin' header is present on the requested resource

3 Answers3