chevron_left
600 points
7 3 2

Origin is an important concept when it comes to Cross-Origin Resource Sharing (CORS). It refers to the unique address of a website or a specific resource on the Internet. With JavaScript enabled, most websites can be accessed from any device. However, there are some cases when you need to give access to another website from your site or vice versa. To do that, you will need to set up the CORS policy for the respective pages. What is the ‘Access-Control-Allow-Origin’ header and how does it help in implementing the CORS policy? If you are wondering what this header is and how it works for cross-site AJAX requests, we have got you covered in this article. Here is everything you need to know about the topic No 'access-control-allow-origin' header is present on the requested resource. Jquery and how to fix its absence on a website.

Photo by Spencer Selover

Table of Content:

                What is No 'access-control-allow-origin' header is present on the requested resource. Jquery
                What are the reasons: Why this error occurred.
                Solutions.
                Conclusion.

What is No 'access-control-allow-origin' header is present on the requested resource. Jquery.

If you are trying to do a cross-origin request, but your server is not configured properly, then the error message “No ‘access-control-allow-origin’ header is present on the requested resource.” will be displayed. You will need to configure your server for cross-domain requests or find a way around this problem by using non-cross domain requests instead of cross-domain ones.

What are the reasons: Why this error occurred.

This error is a common one and can be caused by many different things. Usually, the problem is that the server your site is running on only allows cross-domain requests from certain domains. The most common way to fix this issue is to configure your server so that it accepts cross-domain requests from all domains. Otherwise, you can try making a request using HTTP instead of HTTPS, which will not require an access control header for security reasons but may not work in all browsers or scenarios.

The Solutions.

You need to configure the service header (API Service) to address such a solicitation (Ajax). You can include an HTTPS Response Header to address an Ajax request sent from any source. All you need to do is include the code in the Global.asax file in the server presented below (where you have the service running).

Global.asax (C#)

protected void Application_BeginRequest(object sender, EventArgs e)

{

    HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin","*");

}

Vb.Net

Protected Sub Application_BeginRequest(sender As Object, e As EventArgs)

       HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*")

End Sub

Keep in mind: Update the Global.asax file that is in the server application, where you have made your Web API service. Hence, you should access the service that is running on the server, to roll out the important changes.

The Conclusion.

I'm sure you have gone over a comparative situation. Any user can get into this situation because we are good at making mistakes. I have learned a lot from my mistakes and to help others who will come later as much as possible I have written these lines that will help those who come later. It is said that the distribution of knowledge is the cause of the increase in knowledge, so share knowledge as much as possible and guide those who are coming behind.

If you read this far, tweet to the author to show them you care. Tweet a Thanks

More Posts

Jquery autocompletes multiple fields using jquery ajax PHP and MySQL AnkurRanpariyav - Aug 4
Display json data in html table using jquery ajax James - May 31
Docker denied: requested access to the resource is denied cafe-coder45 - Jun 1
No owin authentication manager is associated with the request Hussain Zafar - Jun 8
Response for preflight does not have HTTP ok status. zhteja - Jul 26