chevron_left
1,680 points
10 5 2

The World Wide Web was founded on the Hypertext Transfer Protocol (HTTP), which is used to load web pages via hypertext links. Running on top of other layers of the network protocol stack, HTTP is an application layer protocol created to transport data between networked devices. A client machine requests a server, which then sends a response message, in a normal HTTP flow. The information that web browsers and other internet communication platforms need to load a webpage is requested via an HTTP request. Every HTTP request sent across the Internet consists of several encoded bytes carrying various kinds of information. Google said in 2014 that it would migrate from HTTP to HTTPS for a variety of reasons. In 2019, Google Chrome announced that it would stop loading all HTTP sites and any data that required the HTTP protocol, such as stylesheets, videos, and photos. The distinction between HTTP and HTTPS is that the latter is far safer than the former; the letter "S" is added to indicate the addition of a more secure protocol.

Photo by ROMAN ODINTSOV

Table of Contents:

Response for preflight does not have HTTP ok status (Explanation)

While using the internet, you must communicate with the server as a client. To give you an example, let's say that I'm trying to access a webpage in my browser. I'm trying to contact the server that hosts the particular website and ask for permission to open it in my browser as a client. All of this is carried out using a mechanism known as Cross-Origin Resource Sharing (CORS).

An HTTP header-based system called Cross-Origin Resource Sharing (CORS) enables a server to specify any origins (domain, scheme, or port) other than its own from which a browser should be able to load resources. To verify that the server hosting the cross-origin resource would allow the actual request, CORS also uses a method wherein browsers send a "preflight" request to the server hosting the resource. The browser transmits headers that specify the HTTP method and headers that will be used in the actual request during that preflight.

A CORS preflight request is a CORS request that uses particular methods and headers to test if a server is aware of and understands the CORS protocol. It is an OPTIONS request employing three HTTP request headers: the Origin header, Access-Control-Request-Method, and Access-Control-Request-Headers. In most circumstances, front-end developers don't need to create preflight requests manually because they are automatically generated by browsers. It manifests when a request is marked as "to be preflighted" and is left out for straightforward requests.

Users see this response from the server when the preflight request from HTTP will not be entertained by the server.

What are the core causes that produce this message?

You must be aware that this functions for straightforward CORS requests. The service might not function for more complicated requests that specify custom headers, etc. This is a result of the browser's preflight system, which determines whether the service will accept the request. An OPTIONS is triggered to determine what the service is accepting before sending an AJAX request (such as a GET or POST). This is shown in Chrome's network tab.

Two headers are present in the request:

Access-Control-Request-Headers

Access-Control-Request-Method

Request Method: OPTIONS

Status Code: 405 Method Not Allowed

Request Headers

            Provisional Header are shown Access-Control-Request-Header: append,delete,entries,foreach,get,has,keys,set,values

                Access-Control-Request-Method: GET

The browser first determines whether CORS is enabled on the service before sending the actual GET request. This is accomplished by determining whether the service accepts the methods and headers that the actual request will use. Therefore, it is necessary to satisfy the additional requirements in addition to allowing access to the service from a different origin.

when You just send a GET when using Postman to visit your back-end. Before checking for an "Access-Control-Allow-Origin" header that matches the origin of the page making the request, the browser will issue an OPTIONS request (without your authentication header). You will receive the error you are experiencing and the GET request will not be made if the response to the OPTIONS request is not a 2xx, the header is not present, or the header value does not match the origin of the requesting website.

The Solution

The answer is straightforward; the user just needs to tell the Apache server to set the headers and add the ones that are missing. The header set directive should be included in your HTTP service setup.

Header always set Access-Control-Allow-Origin "*"

Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"

Header always set Access-Control-Allow-Headers "append, delete, entries, foreach, get, has, keys, set, values, Authorization"

If still not functioning!

Even after changing the values, the browser may still display an error, preventing you from calling the service. Not 2xx, the answer code. A rewrite rule in the Apache configuration can be used to enforce the return of a 200 HTTP code.

RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]

With this configuration, the service will now work with CORS. The first OPTIONS request will pass:

Request Method: OPTIONS

Status Code:  200 OK

Also passing is the GET request that follows:

Request Method: GET

Status Code:  200 OK

Change your back-end such that when handling the login URL, the OPTIONS method does not require authentication to avoid seeing this warning.

If you are dealing with a .Net web API project you ought to alter web.config file and eliminate the tag underneath


<handlers>
      <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
  &#60;remove name="OPTIONSVerbHandler" />
  &#60;remove name="TRACEVerbHandler" />
  &#60;add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />

</handlers>

If you are working with angular, you can avoid this issue by creating a proxy configuration. In the root folder of your angular application, create a proxy.config.json file. Where the package.json file is present Proxy simply passes browser requests to your backend API server at the same domain and port where your frontend application is hosted. CORS is a problem with browser security and does not apply when using a proxy to conduct "backend to backend" communication. The following should appear in the content.

{
    "/delivery/all/*": {
    "target": "https://localhost:8443",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
    }
}

From within our application, all requests to /delivery/all/... will be sent to https://localhost:8443/delivery/all/ folders

The Conclusion

So, I think that this article has been very helpful for you. As I explained the details of the issue, reasons, and possible solutions with the maximum necessary information that should be included. Additionally, I also explained the CORS, preflight, and HTTP that were necessary to understand the actual issue. I hope that you can use it to solve your problems now. If you have any question or comment about my article, please leave a comment below.

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

More Posts

Error in error: metadata version mismatch for module zhteja - Sep 7
Control. Register On Change Is Not A Function zhteja - Sep 16
You may not have a proper app for viewing this content. zhteja - Aug 17
The module was expected to contain an assembly manifest zhteja - Jul 7
Jquery autocompletes multiple fields using jquery ajax PHP and MySQL AnkurRanpariyav - Aug 4
No 'access-control-allow-origin' header is present on the requested resource. Jquery. Hussain Zafar - Jun 6
Display json data in html table using jquery ajax James - May 31
Can't bind to 'ngif' since it isn't a known property of 'div' Hussain Zafar - Jun 9
you must install peer dependencies yourself sadmin - May 11
Failed to load resource: the server responded with a status of 404 (not found) Ankur Ranpariya - Sep 18
You have Exceeded Your Request Quota For This API zhteja - Sep 23
You Don't Have Write Permissions For the /library/ruby/gems/2.3.0 Directory Hussain Zafar - Jun 14
There are 4 bytes in an ipv4 address. what is the highest decimal value you can have for one byte? James - Jun 1
Psql fatal role root does not exist zhteja - Sep 21
Indentationerror: unindent does not match any outer indentation level Ankur Ranpariya - Sep 19
How to fix target class controller does not exist in laravel 8 mgndevftart - Sep 4
How to say String does not equal in java AnkurRanpariyav - Aug 7
TypeError: 'str' object does not support item assignment zhteja - Aug 1
Str' object does not support item assignment zhteja - Jul 30
Error does not name a type C++ cafe-coder45 - Jun 2