The following piece of code works fine when served from localhost, but when deployed to Heroku fails stating :
TypeError: navigator.mediaDevices is undefined
navigator.mediaDevices.getUserMedia({audio: true, video: true}).then(function(stream){
video = $('#myVid')[0];
video.srcObject = stream;
video.onloadedmetadata = function(e) {
video.play();
};
Including adapter.js from WebRtC does not help. Have you had a similar experience and got it resolved?
Like Google did years ago, Firefox is now (since v69) requiring a secure-context to access the MediaDevices API.
You must serve your website from https.
To extend Kaiido's answer.
In the case of running applications locally,
localhost is considered secure (docs)
0.0.0.0 is not considered secure. The application can be visited by other clients on the same network.
For example, if you launch a NextJS server, the output might suggest you could visit 0.0.0.0:3000:
started server on 0.0.0.0:3000, url: http://localhost:3000
You should visit the http://localhost:3000 to avoid this error.
Related
I have a simple MVC web application where javascript code sends ajax requests to the controller and the controller sends back responses.
I built the app 2 years ago and everything used to work fine. Now I tried to run the app again locally and met with the following problem:
whenever an Ajax request is sent from the frontend to the controller (running on localhost), the localhost refuses to connect and I get an ERR_CONNECTION_REFUSED message in (chrome's) javascript-console. (In Safari's javascript-console I get the following error message: "Failed to load resource: Could not connect to the server.")
I'm running the app using NetBeans 11.2. My NetBeans IDE uses GlassFish as server:
I removed the Glassfish server from NetBeans IDE, deleted its folder in my home directory and then added the Glassfish server again in my NetBeans IDE (which also entailed downloading the the newest version of the Glassfish server).
Still, the server refuses to accept any requests from the frontend.
I also tried using Payara Server (version 5.193). That didn't make a difference either.
The frontend itself looks fine at first glance by the way. That is, going to http://localhost:8080/myapp loads the frontend of the app. However, any dynamic features of the app don't work because the server refuses to accept any Ajax requests coming from the frontend (and initiated through mouse clicks).
How can I fix this?
I think I found the reason for the problem:
In my javascript-file I have the following line of code:
var url = "http://localhost:8080/myapp/Controller";
The variable "url" is passed to all the AJAX requests sent to localhost.
But here is the crazy thing: the AJAX requests are not sent to "http://localhost:8080/myapp/Controller" but to "http://localhost:8081/myapp/Controller" !!!!!
What the hell is going on here?!
Did you use port 8081 before and then changed the variable "url" to the new port 8080? In this case, maybe the variable is still set to the old value in the cache. Restart your computer and see whether this fixes the problem.
If the value of the attribute http-listener is localhost, it will refuse the connection external connection.
You can verify using its value using the command
asadmin> get server-config.network-config.network-listeners.network-listener.http-listener-1.*
Information similar to the following should returned:
server.http-service.http-listener.http-listener-1.acceptor-threads = 1
server.http-service.http-listener.http-listener-1.address = 0.0.0.0
server.http-service.http-listener.http-listener-1.blocking-enabled = false
server.http-service.http-listener.http-listener-1.default-virtual-server = server
server.http-service.http-listener.http-listener-1.enabled = true
server.http-service.http-listener.http-listener-1.external-port =
server.http-service.http-listener.http-listener-1.family = inet
server.http-service.http-listener.http-listener-1.id = http-listener-1
server.http-service.http-listener.http-listener-1.port = 8080
server.http-service.http-listener.http-listener-1.redirect-port =
server.http-service.http-listener.http-listener-1.security-enabled = false
server.http-service.http-listener.http-listener-1.server-name =
server.http-service.http-listener.http-listener-1.xpowered-by = true
Modify an attribute by using the set subcommand.
This example sets the address attribute of http-listener-1 to 0.0.0.0:
asadmin> set server.http-service.http-listener.http-listener-1.address = 0.0.0.0
Reference:
https://docs.oracle.com/cd/E19798-01/821-1751/ablaq/index.html
I am working on an app using a React frontend and Express backend, with GraphQL setup through Apollo (I am following and modifying tutorial https://www.youtube.com/playlist?list=PLN3n1USn4xlkdRlq3VZ1sT6SGW0-yajjL)
I am currently attempting deployment, and am doing so with Heroku. Everything functions perfectly on my local machine before deployment and on Heroku in Google Chrome. However, I get the aforementioned errors in Safari and Firefox, respectively. Wondering why this is happening in these browsers and how to fix.
I have spent about 10 hrs doing research on this. Things I tried that made no difference:
I tried adding CORS to my express backend
I tried serving the graphql endpoint as HTTPS
Moving app.use(express.static) in main app.js server file
I couldn't find many other things to try. Everywhere I looked seemed to say that CORS fixed the problem, but mine persists.
Github link: https://github.com/LucaProvencal/thedrumroom
Live Heroku App: https://powerful-shore-83650.herokuapp.com/
App.js (express backend):
const cors = require('cors')
// const fs = require('fs')
// const https = require('https')
// const http = require('http')
app.use(express.static(path.join(__dirname, 'client/build')));
app.use(cors('*')); //NEXT TRY app.use(cors('/login')) etc...
app.use(cors('/*'));
app.use(cors('/'));
app.use(cors('/register'));
app.use(cors('/login'));
app.get('/login', (req, res) => {
res.sendFile(path.join(__dirname, "client", "build", "index.html"));
});
app.get('/register', (req, res) => {
res.sendFile(path.join(__dirname, "client", "build", "index.html"));
});
server.applyMiddleware({ app }); // app is from the existing express app. allows apollo server to run on same listen command as app
const portVar = (process.env.PORT || 3001) // portVar cuz idk if it will screw with down low here im tired of dis
models.sequelize.sync(/*{ force: true }*/).then(() => { // syncs sequelize models to postgres, then since async call starts the server after
app.listen({ port: portVar }, () =>
console.log(`🚀 ApolloServer ready at http://localhost:3001${server.graphqlPath}`)
)
app.on('error', onError);
app.on('listening', onListening);
});
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
Full file is on Github, I tried to post only relevant parts above.
The expected result is that it works in all browsers. It seems from my research that since Heroku serves on HTTPS, Safari and Firefox do not allow requests to HTTP (which is where the graphql server is located, http://localhost:3001/graphql'). When I tried serving Apollo on HTTPS, Heroku just crashed, giving me H13 and 503 errors.
Thanks for any help...
This may also happen during local development when running the front end using HTTPS, but the back end using HTTP.
This is because CORS treats two URLs as having the same origin "only when the scheme, host, and port all match". Matching scheme means matching protocols e.g. both http, or both https.
One solution for local development is to proxy the back end using a tool such as ngrok.
Suppose the front end uses an environment variable which indicates the back end's URL:
BACK_END_API_URL=http://localhost:3005. Then do the following.
Install ngrok
Identify what port the back end is running on e.g. 3005
Run ngrok http 3005 at the command line, which will establish both http and https endpoints. Both will ultimately proxy the requests to the same back end endpoint: http://localhost:3005
After running ngrok it will display the http and https endpoints you can use. Put the one that matches the front end protocol you're using (e.g. https) into your front end environment variable that indicates the back end's URL e.g.
BACK_END_API_URL=https://1234asdf5678ghjk.ngrok.io
Was going to delete this because it is such a silly problem but maybe it will help someone in the future:
I simply replaced all of my 'http://localhost:PORT' endpoints in development with '/graphql'. I assumed that localhost meant local the machine running the code. But an app running on Heroku does not point to localhost. The express server is served on the url (https://powerful-shore-83650.herokuapp.com/) in our case...
At any rate I am so glad I came to a solution. I have a full stack app deployed and connected to a db. Hopefully this post can save someone lots of time.
I have this issue trying to connect to websocket using socket.io-client (Socket.IO.js build:0.9.16)
Failed to load resource: the server responded with a status of 404 (Not Found)
XMLHttpRequest cannot load https://myserver.it/socket.io/1/?t=1488475368547. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://my_vps_ip' is therefore not allowed access. The response had HTTP status code 404.
the strange things are:
localhost it works fine
in amazon ec2 instance it works fine
in another vps (cloud vps bought here) it doesn't works
This is my code:
socket = io.connect('https://myserver.it' ,{
transports: ['websocket'],
secure: true,
'force new connection' : false,
'reconnect' : true,
});
Apache 2.4.18 in twice VPS, same configuration, same modules
I really don't understand ...
I dunno if this help but I've faced with same kind of problem time ago.
Check your URL and ensure it NOT end with /
e.g. https://myserver.it/ != https://myserver.it
It looks like you've run into a CORS issue. You need to make sure that you are explicitly allowing access to the requested resource.
You may want to look at enable-cors.org former guidance.
I've been developing with the vue-cli and the Webpack template. Everything works flawlessly but I'm having some issues using a custom host. Right now Webpack listens to localhost:8080 (or similar) and I want to be able to use a custom domain such as http://project.dev. Has anybody figured this out?
This might be where the problem resides:
https://github.com/chimurai/http-proxy-middleware
I also added this to the proxyTable:
proxyTable: { 'localhost:8080' : 'http://host.dev' } and it gives me a console response [HPM] Proxy Created / -> http://host.dev
Any advice, direction or suggestion would be great!
Update
I successfully added a proxy to my Webppack project this way:
var mProxy = proxyMiddleware('/', {
target: 'http://something.dev',
changeOrigin: true,
logLevel: 'debug'
})
app.use(mProxy)
This seems to work, but still not on port 80.
Console Log:
[HPM] Proxy created: / -> http://something.dev
I can assume the proxy is working! But my assets are not loaded when I access the url.
Is important to note I'm used to working with Mamp -- and its using port 80. So the only way I can run this proxy is to shut down Mamp and set the port to 80. It seems to work, but when I reload page with the proxy URL -- there is a little delay, trying to resolve, and then console outputs this:
[HPM] GET / -> http://mmm-vue-ktest.dev
[HPM] PROXY ERROR: ECONNRESET. something.dev -> http://something.dev/
And this displays in the browser:
Error occured while trying to proxy to: mmm-vue-ktest.dev/
The proxy table is for forwarding requests to another server, like a development API server.
If you want the webpack dev server to run on this address, you have to add it to your OS's hosts file. Vue or we pack can't do this, it's the job of your OS.
Google will have simple guides for every OS.
I'm working on twitter search web app http://twitter.batak.tk/ and locally everything works fine but when I deploy it on OPENSHIFT MEAN stack server (free) I'm getting this error:
WebSocket connection to 'ws://nodejs-igrica.rhcloud.com/socket.io/?EIO=3&transport=websocket&sid=Wtvf6VI-9QqTvICUAAAI' failed: Error during WebSocket handshake: Unexpected response code: 400
twitter.batak.tk is just an alias to nodejs-igrica.rhcloud.com.
This is my socket service code:
app.
factory('SearchService', ['socketFactory', function(socketFactory) {
var myIoSocket = io.connect('http://nodejs-igrica.rhcloud.com/:8000', {'forceNew':true });
mySocket = socketFactory({
ioSocket: myIoSocket
});
return mySocket;
}]);
and this is a server.js:
https://github.com/isBatak/twitter_search_web_app/blob/master/server.js
I'm stuck with this...
The problem came from Openshift. You have to specify the port sockets are going to use. Just had to write:
var ioSocket = io.connect('http://my-site.rhcloud.com:8000');
You must use port 8000.
Source: question/answer, same problem like you
Extra
You should use a subdomain to access your openshift app. Use for example:
http://node.yourdomain.com:8000
Instead of
http://my-site.rhcloud.com:8000
Remember, you have to set up an alias for your gear in OpenShift in order to be correctly redirected.
Hi did you try your server using the websocket.org echo service?