I'm trying to use the OAuth.io Javascript SDK from a mobile app's webview. If local js tries to connect a service like this:
OAuth.callback('<service>', function(err, result) {
...Then the connection redirect page complains:
Missing origin or referer.
Is there a way to send an appropriate origin or referer header from a local html/js in a webview?
Related
I need to deploy a simple react app just for showcase purposes. But there is a problem when I'm trying to host it on Netlify, Vercel, Firebase and I can't use heroku. I'm getting this.
Mixed Content: The page at 'https://ip-tracker-b72ffu8s0.vercel.app/' was loaded over HTTPS, but requested an insecure resource 'http://api.ipstack.com/check?access_key=3a79079d875...'. This request has been blocked; the content must be served over HTTPS.
I would like to use https://api.ipstack.com/check instead of http://api.ipstack.com/check
but free plan do not allow me to use https.
The question is where I can deploy react-app on http? I don't care about safe connections. I just want to deploy as a demo.
The front-end app is built on ReactJs and development server is running on http://localhost:3000. The back-end API is built with Flask 2.0.2 and is running on http://localhost:5000
In app.py file, the CORS has been allowed as mentioned in the documentation like:
CORS(app, resources={r"*": {"origins": "*"}})
When I try to submit the login form I still get the following error:
if you Enables CORS on your backend api , it should work.
I don't think this is an issue with your react frontend application.
cors is a security measure put in by browsers.
You could bypass the Cross-Origin-Policy with chrome extension but it's not advisable -
Try this on your backend API:
Ensure you have flask cors installed
create a configuration dictionary like this
api_v1_cors_config = {
"origins": ["http://localhost:5000"]
}
You can then set a global cors for your app like this
CORS(app, resources={"/api/v1/*": api_v1_cors_config})
// this would allow all methods, origins
HTTP Error 404.3 - Not Found
The page you are requesting cannot be served because of the extension configuration. If the page is a script, add a handler. If the file should be downloaded, add a MIME map.
I got this error when accessing react frontend. the app is hosted on the azure app service. so anyone knows how to fix this? is it need to be done in react side?
We currently have a Ionic v1 project that calls an API implemented as a Google App Engine application. This Ionic app runs with Ionic serve, PhoneGap, and when deployed to Android/iOS.
We are now trying to deploy to the web using Firebase hosting.
The initial HTML/JS code all runs correctly until we reach an $http.get call to the Google App Engine. What happens then is that the request reaches the GAE server and is processed correctly there with a response being sent back. But in the client code, the response.data property is the contents of the Firebase application’s index.html rather than the response that was supplied from GAE.
We don’t know why this is happening, or how to fix it, but here are some relevant facts:
When we run the app on a device using PhoneGap or via the Google Playstore, the URL by which we access GAE is the same URL if we were accessing GAE from a browser. But, when we run the app via “ionic serve” we must use a proxy to work around a CORS issue. What we do is to specify a simplified URL in the Ionic code, and then provide a mapping of that simplified URL to the GAE’s actual URL in a file called “ionic.project” which looks something like this:
{
"name": "proxy-example",
"app_id": "",
"proxies": [
{
"path": "/api",
"proxyUrl": "http://cors.api.com/api"
}
]
}
When we attempt to deploy the app via either “firebase deploy” or “firebase serve” we must use the proxy version of the URL in our $http.get call. Otherwise the call does not reach the GAE server at all. It is not clear how Firebase knows to use “ionic.project” for the proxy mapping.
We are not using “Angularfire”, only the standard AngularJS library that is packaged with Ionic 1.x
Thanks for any help you can offer.
I've made a weather app that makes an API call to freegeoip to locate your current location's coordinates, and then using those coordinates to connect to openweathermap API to fetch your current location's weather.
In development the app worked perfectly fine. But after deploying to Heroku, I seem to get what looks like a CORS error?
Console logs:
Mixed Content: The page at 'https://weather-react-drhectapus.herokuapp.com/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://freegeoip.net/json/'. This request has been blocked; the content must be served over HTTPS.
Link to Heroku app
EDIT:
Changing to https seems to work for the freegeoip API (https://freegeoip.net/json/), but doesn't work for the openweathermap API. This is the full console log I get:
GET https://api.openweathermap.org/data/2.5/weather?appid=95108d63b7f0cf597d80c6d17c8010e0&lat=49.25&lon=4.0333 net::ERR_CONNECTION_CLOSED
bundle.js:16 Uncaught (in promise) Error: Network Error
at e.exports (bundle.js:16)
at XMLHttpRequest.d.onerror (bundle.js:16)
Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys
Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error
Just change API endpoint to use https instead of http.
https://freegeoip.net/json/ works well ;)
Update
Your updated question contains one more request. Unfortunately, api.openweathermap.org is not available over HTTPS. Thus, you need to reach it thru proxy under your control and forward response to your client. For more info, see this answer
If you apply this middleware it should start working correctly
app.use(function (req, res, next) {
if (req.headers['x-forwarded-proto'] === 'https') {
res.redirect('http://' + req.hostname + req.url);
} else {
next();
}
});