so my problem is basically the same as here, but the question isn't answered yet.
The problem ist, that I can't view my vue application in the webbrowser when visiting <pc_ip>:8080. However when starting my vue.js app with npm run serve it tells me, that this is how I could access the page besides doing localhost:8080. It works from my PC but with my phone which is connected to the same wifi I get the error that the url is not reachable.
Thanks in advance!
UPDATE:
So after finding some other posts I also tried writing some stuff to a vue.config.js like here, here, here or here e.g.
module.exports = {
devServer: {
port: 8080,
host: '0.0.0.0'
}
}
However the problem still persists. I also tried replacing the host in that file with my actual ip, but it does not work either.
UPDATE 2:
As mentioned in a comment, I had a similar problem some time ago, when trying to access my flask server from my phone which was in the same network. Back then I set the host variable to the pc's IP and it worked. As I tested again just now, I realized that the corporation proxy I have to use in parallel could play a role in this. When I wasn't connected via using plink.exe, I could not access my running flask server from my phone. When I connected after that, everything is working.
Could the proxy or a missing configuration be hindering me to access my vue application?
UPDATE 3: so i turned of my firewall completely and then i could access the page from another device. I wondered if some other rule was blocking the port like in this post Windows Firewall - Laravel Artisan Serve - Allow Port in Inbound Rule (not working). But I am not sure how I would find that rule if there is one blocking my port?
Please follow this link:
Work around this problem
I add the following code to my vue.config.js
module.exports = {
devServer: {
port: 80,
host: '0.0.0.0'
}
}
change the port number according to your need.
Normally when you execute the npm run serve command, it gives you two addresses to access your application. A local address and a network address. Like this :
App running at:
- Local: http: // localhost: 8080 /
- Network: http://IP_ADDRESSE:8080/
So with your phone you should use the network address and not the local one.
Related
Short:
How can I set a different port for axios request in nuxt.config, but with same origin domain?
Long:
On my production side I have an express server that delivers my frontend and backend over the same port (e.g. http://192.168.2.22:8800). Axios will make API requests on that same origin with same port. Works very well.
On my dev side I have an express server that delivers only my APIs and I also have the nuxt server, serving the frontend. Both running on different ports (e.g. http://192.168.2.22:8800 for my backend and http://192.168.2.22:3000 for my nuxt). So that I can also execute the API calls in my development environment, I set the baseURL in my nuxt.config to http://localhost:8800.
My problem here is, I can only test my dev environment if I'm on localhost. If I want to access via another pc, the api calls are also started on localhost, which is not reachable.
Is there a way to add a dynamic port to the baseURL?
My nuxt.config right now:
axios: {
baseURL: isDev ? 'http://localhost:8800/api/v1' : '/api/v1'
},
For a better overview.
This is what I want on my production (only express is running):
Frontend: http://192.168.2.22:8800
Backend: http://192.168.2.22:8800
This is what I want on my dev side (two servers are running - express and nuxt):
Frontend: http://192.168.2.22:3000
Backend: http://192.168.2.22:8800
Environment variable are still your best bet here indeed. It will help you configure each environment to your liking and will avoid a lot of mistakes too.
Here is an interesting article on the subject too: https://nuxtjs.org/blog/moving-from-nuxtjs-dotenv-to-runtime-config
This might be a stupid question since it seems pretty simple, but I can't get my nuxt project to run on my IP address.
The Nuxt.js docs say that I have to put this in my package.json file in order for it to start on my IP:
"config": {
"nuxt": {
"host": "0.0.0.0",
"port": "3333"
}
}
In a lot of articles online the 0.0.0.0 automatically binds to your IP address so you can access the project in the browser with your IP address. Whenever I run the command yarn dev it just starts the project on 0.0.0.0:8000. Is this normal? If yes, how do I get it to run on my actual IP Address?
I would really like to know how I can get this done, this is really confusing me.
I know you asked this a long time ago and never got an answer. This is currently the top Google result so it is worth a good answer for the future of the internet.
Your setup looks (largely) correct, but it needs to be in your nuxt.config.js file, not your package.json.
There are a few ways to do this:
Option #1 - Inside nuxt.config.js:
export default {
// ... All your other settings are already here
// You will need to add this:
server: {
host: '0',
port: '3000' // optional
}
}
This will expose your app on your local network. When you run npm run dev now it will run on your computer's IP address. The output in the console will link to your computer's IP address followed by the port number. It will no longer use "localhost".
Option #2 - From the Command Line
If you just want to run this as a one-off command to test something briefly, then you can specify HOST=0 in the command line before running your npm run dev command.
It would look like this:
HOST=0 PORT=8000 npm run dev
Option #3 - Create A Script for Hosting the Dev Server
This option is good if you frequently switch between localhost testing and internal network testing. It allows you to create a new NPM script so that you can simply run npm run dev when you want to run locally, or run npm run dev:host if you want to host internally.
This requires adding a script to package.json
/*
* package.json
*/
{
... other options
"scripts": {
"dev:host": "nuxt --hostname '0' --port 8000"
}
}
You can change the name of the script (the part that says "dev:host" to be anything you want to call it. In this example though you would run npm run dev:host in the console to run it on the network. But the npm run dev command would work the same as before (using localhost).
All of these are useful in case you want to open the app in development on a mobile device for testing. Your mobile device will need to be on the same wifi network as your computer to access the page. Just open a web browser on your other device, type in the IP address with the port number and it will connect to your dev server. This does NOT publically expose your app, it only exposes it internally on your network. This is designed for testing, nothing more.
Read More in the Docs: https://nuxtjs.org/docs/2.x/features/configuration#edit-host-and-port
If you wanna run the app in public IP you need a hosting like digitalocean, vultr.
If you wanna run the app in a private IP then you install a web server and you need to use your public ip address and set up port forwarding. But this is not safe.
You can modify this in the nuxt.config.js file it is not advised to as it might cause you issues when hosting your site. It is much better to modify the host direct in the dev command. Like this
HOST=0 npm run dev
or the port that you want
PORT=8000 npm run dev
or both
HOST=0 PORT=8000 npm run dev
We're trying to connect to an API (.net core 2.2) from react-native (version 0.59), via localhost, both apparently running on the same ip, different ports, react-native on port 8080, and the api on the 44344, the issue happens the moment we fetch the url from react-native
We’ve also tested running the url from Postman and everything seems ok, also from any of the web browser installed (safari/chrome), even we tested the browser INSIDE react-native iOS, and it works.
Any api running outside localhost works perfectly, is the localhost were we failed.
Network request failed.
onerror
whatwg-fetch.js:504:29
dispatchEvent
event-target.js:172:43
setReadyState
XMLHttpRequest.js:580:29
__didCompleteResponse
XMLHttpRequest.js:394:25
emit
EventEmitter.js:190:12
__callFunction
MessageQueue.js:366:47
<unknown>
MessageQueue.js:106:26
__guard
MessageQueue.js:314:10
callFunctionReturnFlushedQueue
MessageQueue.js:105:17
callFunctionReturnFlushedQueue
[native code]:0
Part of the code (function) that fetch the api, very simple (for now)
async Submit(){
//GET METHOD
try {
let response = await fetch('https://192.168.1.56:44344/api/values');
let responseJson = await response.json();
return Alert.alert(JSON.stringify(responseJson));
} catch (error) {
console.error(error);
}
}
Ok first of all, we've tried EVERY possible solution,to connect my react native app to my .net core api rest, both running in localhost, this is the list so far, of the things that we've tried so far, and still no result.
Localhost
127.0.0.1
Computer ip (network ip not mac address)
React Native blank project (from the ground up)
API .net core blank project (from the ground up)
Running snack expo + api .net core
ip forwarding (We can't do that do to our job policies/Not the solution we're looking for)
http/https
Different ports
Android and ios permissions from react-native
Same network different ip (this sorta worked, but we don't know exactly why it doesn't work running both react-native and the api in the same ip (localhost))
10.0.2.2 (for android)
Enable cors on api .net core (but apparently this doesn't work on native apps, only for web)
Expose the ip through ngrok/serveo (We can't do that do to our job policies/Not the solution we're looking for)
Frisbee
Axios
Websocket (We can't do that do to our job policies/Not the solution we're looking for)
XMLHttpRequest (status code error 0)
Firewall/proxy (our network is free from firewalls and proxies)
Web browser plugins (deactivated and/or uninstalled)
Cache/cookies
Docker (We can't do that do to our job policies/Not the solution we're looking for)
Reboot my macbook pro
we expect react native to fetch the api, so we can continue with the office 365 login authentication.
EDIT: I just discovered that fetching the machine ip (this time running windows), with my ip being 192.168.0.9 both on the api and the react native, the fetch result showed me the 10.0.2.2:80 in the header of the json response. I suppose it is the "localhost" ip from react native. How am I supposed to fetch an ip from localhost if react native is not letting me to do so?
EDIT: We had to go for plan B this time around, we've made it work with a docker on the api, but I need a solution for this problem. I'm 99% sure the issue is react-native and nothing else.
EDIT: After all these weeks one of my colleges managed to solve it. First of all, we couldn't make the firewall in my macbook pro work properly. Second, we solved that and found out our api was having issues. He found out the redirection was on https, and the certifications weren't working properly, so he changed this
"applicationUrl": "http://192.168.0.114:5001;https:192.168.0.114:5001"
to
"applicationUrl": "http://192.168.0.114:5001"
I got the same issue while fetching localhost API from react-native. Here is what I did to solve this issue.
In the startups class, I removed //app.UseHttpsRedirection(); from Configure method.(Not sure if it is needed)
After that in the launchsetting.js file under the properties folder, I changed from
"applicationUrl": "https://localhost:5001;http://localhost:5000"
to
"applicationUrl": "http://localhost:5000"
and in the React native part, I simply changed my localhost with my IP:
fetch('http://localhost:5000/values/') to fetch('http://127.0.0.1:5000/values/')
This completely worked for me
Take command prompt and type ipconfig, so we will be getting many addresses. From that take IPV4 and copy it to the clipboard. Then paste this address to both the back ends port address and front end port address.
eg say IPV4 address is 192.168.1.3 then make you your back end route API similar to this http://192.168.1.3:8080/patients, where 8080 is the port number (never mind). And use the same for the front end to grab the API result.
You have to do two things.
1 - Use http://192.168.1.x:8080 (your local ip ) rather than http:// localhost:8080 in your client.
2 - Add following code snippets to your .net core web api project in Startup.cs.
readonly string MyAllowSpecificOrigins = "_myAllowSpecificOrigins";
services.AddCors(options =>
{
options.AddPolicy(name: MyAllowSpecificOrigins,
builder =>
{
builder.WithOrigins("http://192.168.1.x:8080")
.AllowAnyHeader()
.AllowAnyMethod();
});
});
.
.
.
app.UseCors(MyAllowSpecificOrigins);
Something that worked for me was run adb reverse tcp:<YOUR PORT> tcp:<YOUR PORT> in terminal
I'm not sure of how it works exactely, but I guess it makes some sort of mapping from the virtual device port to your machine's.
Example:
adb reverse tcp:8080 tcp:8080
Using the local IP address worked for me, with no additional configuration.
Example:
fetch("http://192.168.0.103:4000/books", {
method: "GET"
})
Thanks for all the insight, but none of the above solutions worked for me.
What did work:
https://ngrok.com/ - Download ngrok, signup, and connect your account. ngrok creates a private https localhost tunnel.
Setup - https://dashboard.ngrok.com/get-started/setup
Unzip to install:
unzip /path/to/ngrok.zip
Connect your ngrok account (Non functioning example auth token):
ngrok config add-authtoken 2ySPR5UeS3Fjf5YAblNRe7ZcV1o_9sdf2SDFGHjEQaOCE6xEi
Use the command (with your desired port number):
ngrok http 8080
Once ngrok is online, replace your localhost address:
http://localhost:8080
http://127.0.0.1:8080
http://192.168.0.100:8080
with the forwarding web address (Non functioning example address):
https://ebda-61-137-45-130.ngrok.io
I've used ngrok countless times for testing on a variety of networks without issue. So far its the only foolproof method I've found for testing localhost APIs.
I've been having an issue for days and I don't know how to fix it.
I am trying to setup my SSL certificate, and for some reason the site works on http, and then when I try to load https, it loads only the navbar and sidebar, and then it's stuck on the spinner.
When I examine at the network connections on chrome, it keeps trying to load xhr and websockets.
In safari I get this error in the console
WebSocket connection to 'wss://mysite/sockjs/530/72iokiqa/websocket' failed: WebSocket is closed before the connection is established
I am trying to set the headers, in particular the x-forwarded-proto header, but I can't figure out how to do that.
I am using mup.
// Configure environment
"env": {
"ROOT_URL": "https://inslim.com"
},
"ssl": {
"pem": "./ssl.pem"
}
For some reason, when I try to add a por to the env variable, it won't allow me to do mup deploy. It will break and the site will go down.
I am also confused with nginx. I installed it and I set it up, but I don't think it's making any difference. If I run 'service nginx stop' or service nginx start, it doesn't make any difference.
Can someone help me? Any advice or anything would help. Or if you need any other info please let me know.
Here's a screenshot of my spinner of death
The ssl part of your configuration JSON looks fine, but your env part needs a little modification. The env part of the configuration JSON should at least look something like this:
"env": {
"PORT": 80, // Defaults to 80, but could be different if app is configured differently
"ROOT_URL": "http://inslim.com"
}
If you do not have the force-ssl package already added to your application, I would suggest adding that (don't worry, it is a core Meteor package). If you do not also have the spiderable package added to your application, then your ROOT_URL element in your JSON can remain prefixed with http, but if you do have the spiderable package added to your application, you will need to change that ROOT_URL element prefix in your JSON to be https. All of this information is per the documentation for Meteor Up, which can be found here. Also, I can confirm that this setup with the JSON works because I have a production application that is running with this exact setup without any issues.
I have dowloaded latest version of genymotion with proxy server 2.2.2 and while connecting i am getting invalid reply from server (do you use a proxy?). I am not using proxy for sure. Any ideas?
Answer, its all about the http proxy server on the genymotion settings just UNCHECK on the genymotion setting or remover the http proxy server by UN-ticking the ability to enter HTTP PROXY and PORT let it be blank by unckecking hence login your credentials, if it doesn't work try confirming you email with genymotion.
In my case I went to Settings > Network > I checked "Use HTTP Proxy" and I filled the Http Proxy and port fields (with company proxy valid values).
After that I connect smoothly as silk.
I had the same problem in ubuntu and after some struggle when i was almost giving up i stop the docker (had one instance running in port 3337 in my PC) and for my surprise it's finally work.
I had a similar issue (invalid reply from server without Proxy, on a highly customized and quite broken ubuntu 16.04). nothing of the above helped. (seemingly)
Then I visited this site:
http://qaru.site/questions/835901/genymotion-stuck-on-splash-screen
(well, you have to let google translate it, if you are not russian)
the error described there is completely different. (computer crash resulting in different networking issues)
but it had one thing in common with my case:
everything worked fine, and then suddenly: SOME NETWORKING ERROR - without reason
well, for me, the solution was the same as described on the russian page:
removing a (corrupted?!) conf file.
the conf file was at (my home folder)/.config/Genymobile/Genymotion.conf
i deleted it (i had to do it with root, because the file was owned by root, but this might have been the case because i messed a bit with genymotion...)
Then, i restarted genymotion and logged in again and it worked like a charm.
I had to allow Genymtion.exe in windows firewall. I'm using v3
Had the same problem, managed it using a VPN.