. Advertisement .
..3..
. Advertisement .
..4..
What is an API? How did you deal with the error of the API? Is that a common issue?Understanding API is useful for you to fix the issue. Firstly, API (application programming interfaces) is a set of programming code that facilitates the transmission of data; it is between one software and another product. API also includes the terms of this data exchange. Have you seen the following trouble of Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource? Our article would suggest you how to correct them perfectly below
When does ”Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource” Error comes from?
While you are doing a simple API call, you are finding the following error:
XMLHttpRequest cannot load http://server.apiurl.com:8000/u/login?login=facebook. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access. Error 405
The Same-Origin policy is violated when a script on your website or web application tries to access a resource that isn’t set up to permit requests from code coming from outside the same (sub)domain.
This warning message will not cause trouble and waste your time if you don’t fix them soon. Let’s see the simplest solutions here.
How to resolve this problem ”response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource”
Solution 1: Switch off CORS
CORS is a crucial security feature that is intended to stop JavaScript clients from unauthorized access to data from other domains. It causes a lot of problems for developers. It is difficult to comprehend why a request was denied and how to resolve the situation. Such problems are easily resolved with knowledge of the CORS mechanisms and the nature of the blocked request.
Switching off CORS is the simplest way for you to resolve the error ”response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource”. Let’s follow the below guide:
In the Windows:
- Open the Menu
- Text “ Run” or windows+R
- Implement the code as follow: “chrome.exe –user-data-dir=”C://Chrome dev session” –disable-web-security”
In the Mac:
- Operate to the Terminal
- Complete the following instruction: “open /Applications/Google\ Chrome.app –args –user-data-dir=”/var/tmp/Chrome dev session” –disable-web-security”
Solution 2: Include this line in API
The “API Server” is considered as a PHP Application so to deal with this inaccuracy. Establish the lines into index.php.
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
Solution 3: Do the following tips
Check the windows and update the Chrome Versions. The day the solution was started and the last day version for windows running Chrome. Thus, don’t close any Chrome in the version.
- Put a shortcut for it on the desktop.
- Choose Properties in the menu
- Adjust the Target site.
- Address to “C:\Program Files (x86)\Google\Chrome\Application\chrome.exe –disable-web-security –user-data-dir=”C:/ChromeDevSession”.
- Kick off Chrome and reject the warning text “–disable-web-security not applicable!”
Please be careful that using this specific browser instance can endanger you to hackers.
Solution 4: Utilize a reverse proxy server or WSGI server
Excepting the solutions mentioned above, there are other ways for you to fix the error ”response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource”. It is utilizing a reverse proxy server or WSGI server (like Nginx or Apache) to handle the OPTIONS method when proxifying requests to your resource.
In the resource’s code, include support for handling the OPTIONS method.
Although they have different use-cases, both of these strategies are equally valid. These solutions are heplful for you, so let’s do them to get your desired results.
Conclusion
Finally, It’s great to fix the ”response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource” with your help above. I make sure you can easily fix them. Make a quick note so you can find these great solutions quickly when needed!. Don’t miss any comments downward if you have any questions for us.
Leave a comment