I keep receiving the error below when I use Ionic Serve...
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:8100' is therefore not allowed access.
It only occurs with "post" request. The "get" requests I have work with no error. I've seen documentation for proxy's but I was not looking to go that route. I'm currently using the CORS Chrome plugin as a workaround right now, but will be shipping to mobile soon (Ionic view) for testing, which I believe I will still run into the CORS issue using Ionic View.
I have control of the API/server - using nginx.
Any suggestions?
Cors will not affect to mobile phone. The issue is in POST method in web view. In Post methods Browser send OPTIONS Request for security Purpose. It should handle in API. I used ASP.NET WEB API When Using localhost I Used Two Methods for post in Same Name but it's not proper way for doing this. You need to handle in Configuration to Igonre this. If you have API without parameters add headers "content-type x-www-form-urlencoded" to you request header. If there are parameters. use another method without parameters using same name.(Method overloadin). But when you are using livehost don't forget to remove redundant methods.
Related
I want to 301 redirect the URLs from previous site that are nested, as pencilblue doesn’t support them,
e.g. a/b to page/b
For this I have been experimenting in include/http/request_handler.js but facing some issues.
Call never comes inside RequestHandler.prototype.handleRequest or even RequestHandler.prototype.onSessionRetrieved (seems these methods are not being called from anywhere)
Therefore I placed the code in RequestHandler and after confirming that req is not for public resource or api, I create a new url and execute
return this.doRedirect(newUrl, 301)
This actually works but at the same time I receive
Can’t render headers after they are sent error
#1075 has not helped me much as I’m not sure which specific controller I should modify. I need to catch the req as early as possible and see if it’s a page then redirect to page prefixed url.
Thanks in advance.
There are couple of ways to do redirects. You can do them from a controller or from middleware. You are correct in that, some of the functions in the request handler are not called. These are deprecated despite the fact pencilblue team didn't mark them as such. They replaced a good deal of the request handler functionality with /include/http/router.js and include/http/middleware/index.js. Plugins can register their own middleware to hijack the request pipeline.
See Advanced Routing on wiki for more info about creating your own middleware.
Using the routing framework your plugin would be able to register middleware that would be able to inspect the request and then redirect based on your specific criteria. The Router will be accessible from req.router and from there you could call req.router.redirect (Source).
Reference: #1224
I get this error in my Ionic app when I run on my localhost with Chrome (ionic serve):
[Deprecation] getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS.
win # :8100/plugins/cordova-plugin-geolocation/www/android/geolocation.js:35
How to make it disappear ?
How to be sure there's no issue with a device ?
Try again using this plugin in your browser.
It allows to you request any site with ajax from any source, no matter http/https discrepancies and the like. Practically adds the Allow-Control-Allow-Origin: * header in the response.
Please keep in mind that this is a band-aid solution. Your server response has to actually have the 'Access-Control-Allow-Origin': '*' header, preferably with a more specific value than *.
Because switching to HTTPS can be painful or impossible depending on your architecture,
I found a workaround solution: you can use the Google Maps Geolocation API. Although it has usage limits, it does the job. You will need an browser API key, so don't forget to limit it's usage to your page hostname.
I use it as a fallback method to the getCurrentPosition() method if it fails. It allows me to make it work until I switch to HTTPS.
Here's the JSFiddles:
HTTP: getCurrentPosition() will fail and fall back to the API
HTTPS: getCurrentPosition() will succeed
I have a SlingServlet which I am trying to access by making ajax call from html outside of AEM.At first it works but now I am getting following error:
test.html:1 XMLHttpRequest cannot load
http://localhost:4502/bin/DamHandlerr.html?imgURL=http://s3.amazonaws.com/f…iles-aviary-prod-us-east-1/2016-05-24/3dfa830ede7b44c4a88e872b22875c85.png.
No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'null' is therefore not allowed access.
Can anyone guide me here?
This type of request is called CORS (Cross Origin Resource Sharing). If you want the AJAX client host/port to call another host/port URL, the server needs to add appropriate headers in response to tell client that call to different host server is allowed.
You would need to add Access-Control-Allow-Origin header in response to allow AJAX client to successfully access the different origin URL.
Sometimes in modern browsers AJAX client, makes additional request to check if resource is safe to access called Pre-flight Requests, in that case additional headers would be needed in response as listed in the link and this link.
The title pretty much says it all. I know I can bypass it in my browser with --disable-web-security (for chrome) but how does it work for releasing the app? I have no access to the server that is set to deny reverse proxies and only accepts GET requests not OPTIONS this leads to prefight issues. How can I work around this?
I've taken a look at these but they don't seem to answer the prefight from release workaround. Any Suggestions/workarounds?
http://blog.ionic.io/handling-cors-issues-in-ionic/
https://blog.nraboy.com/2014/08/bypass-cors-errors-testing-apis-locally/
Download Chrome cors extension
Do not call a post call from the service, do that from a controller
At the server side make sure you have a option route for every route you have available
Perform a post request like this
$http->post('you api', your_data)
.success(function(response) { ..}).error(function (error) {..})
.finally(function() {..});
Also get palanik/lumencors if your server runs with laravel
You need not worry about CORS in a ionic app build, as in the recent ionic projects, the cordova plugin cordova-whitelist will already be put as part of the config.xml, so when you make a build, it handles the CORS issue by itself.
One of the method that I am testing sends a XMLHttpRequest to "http://localhost:4848/qrs/extension/schema?xrfkey=asdfasdfdf". I am getting an error which looks like this -
XMLHttpRequest cannot load http://localhost:4848/qrs/extension/schema?xrfkey=asdfasdfdf. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9875' is therefore not allowed access. The response had HTTP status code 404.
Now I understand that test are served on "localhost:9876", and trying access localhost:4848 is actually violating cross domain policy. I have seen the karma proxy settings and tried -
proxies: {
'/qrs': 'http://localhost:4848/qrs'
}
But doing this actually serves my content from "http://localhost:9876/qrs/extension/schema?xrfkey=asdfasdfdf". But this way my client code will not work. Because client code directly sends XHR request to "http://localhost:4848/qrs/.....", but NOT to "http://localhost:9876/qrs/.....".
Any suggestion how can I solve this?
Also, wouldn't it be better to have an option to set different headers in the config file? At lest we know that we are talking about test here (I mean not in production).
Thanks in advance.