Could you please help me out in fixing the CORS-Issue in Firefox, Chrome, Safari. As my code is working fine in IE-11. When passing the Http GET request from the browser, it is giving null values in FF, Chrome, Safari. The following is the code that I am trying to execute:
$http.get(URL).success(function(data){})
.error(function(data){});
Thanks in advance.
This is nothing that can be 'fixed'. You need to enable Cross-Origin Resource Sharing (CORS) on the server side.
How you enable this depends on the kind of server. For node and express for example there are modules available that add the necessary headers to the http request and response cycle.
Related
In my React app I am making a simple fetch request:
useEffect(() => {
fetch('http://localhost:3000/').then((response) => console.log('foobar', response));
}, []);
This works fine. But when I try this with my real url like https://my-site.com/abc/token it doesn't work? When I try to fetch a different domain it doesn't work?
What could be the issue and how do I solve this?
Not many details in the post but I'll give it a go.
If you are receiving an error whilst in development similar to the one pictured below, then it means the server you are trying to contact does not allow the host you are developing on. This can be fixed either by either changing the security settings of your browser or installing a plugin that disables CORS.
However, if you are receiving this error in a non-local environment, then it means you should add the hostname of your frontend into the Access-Control-Allow-Origin on the serverside (https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin).
Links for more details
Disable CORS in Chrome + Safari and the plugin for Firefox - https://medium.com/swlh/avoiding-cors-errors-on-localhost-in-2020-5a656ed8cefa
Plugin for Chrome - Why does my http://localhost CORS origin not work?
I am facing problem with the following CORS issue when I run my ReactJS sample web app in Chrome browser.
Access to XMLHttpRequest at 'https://XXXX.XXX/YYY/ZZZ/' from origin 'http://localhost:3003' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
I read the solution and installed CORS Chrome plugin. I added REST URL in CORS settings as shown in below screenshot. I cleared Chrome browser history and try running ReactJS web app, but still it is throwing the same error. Can someone guide how to exactly fix this? I also tried
'Access-Control-Allow-Headers': '*',
'Access-Control-Allow-Origin': '*',
in code, but not fixed this issue.
You can try a workaround with https://cors-anywhere.herokuapp.com
Have a look at my solution in here: https://stackoverflow.com/a/52986448/5692089
I'm trying to make a simple Angular "$http.post" request to a basic registration REST API, but when I check the network tab (developer tools) in Firefox, the POST request is missing.
$http.post('http://example.com/api/user/userregistration', $scope.userInfo).then(function successCallback(response){
console.log(response.data.object, status);
$scope.processing = false;
$scope.processed = true;
},function errorCallback(response){
console.log(response.config, response.data);
});
I do see a HTTP OPTIONS pre-flight request with 200 OK response, but no subsequent POST request seems to work.
I also tried making a Jquery Ajax POST request to the same API but to no avail.
The same Angular code works perfectly fine in Chrome & Safari (OSX Sierra).
I have attached the screenshot of the OPTIONS request which is returning 200 OK but the subsequent POST request is missing (no errors in console)
Please help troubleshoot the above and suggest if I'm missing something obvious.
Ok found the problem and solved it.
The problem:
The Firefox browser installed in my OSX machine was not showing any error, hence I was unable to troubleshoot.
Checked the same POST request from a Firefox in Windows machine, fortunately saw an error saying:
Cross-origin request blocked. (Reason: invalid token "multipart/form-data" in CORS header "Access-Control-Allow-Headers")
The above error means Firefox does not treat "multipart/form-data" as a valid entry in "Access-Control-Allow-Headers" HTTP response header. (However, Chrome & Safari seem cool about it!)
The Solution:
Removed "multipart/form-data" from the "Access-Control-Allow-Headers" HTTP response header and Voila it worked in Firefox as well!
i am using browsermob proxy latest version with selenium script
i am intercepting http requests and adding custom headers on every request and routing all http and https traffic through browsermob proxy
when https request is made in firefox and safari i am getting ssl certificate error (when i checked in network tab manually i could see invalid ssl certificate error)
I checked Browsermob little proxy with mitm and created custom certificate .. when i install that test.cer file in browser manually by dragging certificate into browser then my testscript works fine
could you please help me out in this case how to import dynamically created test.cer file into firefox and safari browser?
or am i doing anything wrong in the approach itself ?
Create a browser profile and import this certificate and use the same profile when you are starting the browser driver. This should solve your issue
I use data from localhost and REST API in my website. My website run properly on IE but in Chrome and Firefox CROS origin related problem occurs. I use Angular.js to create website. Please suggest how to solve these problem.
In Chrome above problem is solved by adding "allow cross origin *" extension.