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

1. AngularJS
2. HTML

3. Error

Answer 1

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');

Answer 2

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?

Answer 3

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