How to avoid “no access control allow origin header” error in google chrome

How to avoid “no access control allow origin header” error in google chrome

how to solve “no access control allow origin header is present on the requested resource” error in Laravel 5.5

how to solve “no access control allow origin header is present on the requested resource” error in Laravel 5.5

In this tutorial,  I’m going to show you,  how to avoid “no access control allow origin header is present on the requested resource” error in google chrome.

When you try to send HttpRequest to a different domain than your page is on, sometimes browser is blocking that request, because some security reasons.

access control arrow origin a+l

cross domain communication from angular plus laravel

If two pages are in same origin (or domain), bellow three factors are affected on those pages.

1. Same protocol.

2. Same Port (if one is specified).

3. Same host.

If two pages are in different origins (or domains), we have to do something to avoid no ‘access control allow origin’ error.

So, To avoid ‘no access control allow origin’ error, we have to allow the browser to cross-domain communication using additional headers.  But, today I’m going to show you a simple method to avoid that error, when you are in development mode.

Notice: please, follow this method when you are in development mode.

Let’s start.

If you like to video tutorial see this video.

If you don’t like to video tutorial, please continue reading.

If you want see how to solve no access control allow origin header is present on the requested resource, error in server side check here.

Go to google and, search for CORS extension. Then, click on CORS toggle.

download cors extension from google

You might know that how to add an extension to google chrome. So, simply click on added to chrome button.

add new extension to google chrome

Then, it will do some checkup and display an alert. Click on add extension button.

added new extension to google chrome for cors

If you have successfully added the extension into the chrome, you can see a success message and, the icon of the extension.

cors extension icon and success message

Finally, go to your application and try again. as you can see, the error is still there. It is because, the extension is not activated by default. So, click on the extension icon. After that,  the color of  the icon will be change to green.

cors icon

After activating the extension, try again. The error has gone.

If you have any question, suggestion or even idea, please comment in the comment section. Those are very important to me to improve quality of my articles. If this tutorial solved your problem, don’t forget to share. Thank you for reading.

Please follow and like us:
Summary
How to avoid “no access control allow origin header” error in google chrome
Article Name
How to avoid “no access control allow origin header” error in google chrome
Description
In this tutorial,  I'm going to show you,  how to avoid “no access control allow origin header is present on the requested resource” error in google chrome. When you try to send HttpRequest to a different domain than your page is on, sometimes browser is blocking that request, because some security reasons.
Author
Publisher Name
Angular + Laravel
Publisher Logo

One Response

  1. Mishel says:

    Thank you. It was very helpful.

Comments are closed.