gpt4 book ai didi

vue.js - 访问 WSL2 Vue.js 服务器 (localhost :8080) exposing NATted IP number externally

转载 作者:行者123 更新时间:2023-12-04 18:42:25 34 4
gpt4 key购买 nike

一些背景知识,让您知道我想要实现的目标,然后有人建议我想要的不是我想要的:我正在开发一个 Vue.js 3 服务,带有一点 Python (Flask) 后端。这两个组件都在 (Ubuntu) WSL2 和 Windows 10 上运行。分别引用 http://localhost:8080 (Vue) 和 http://localhost:5000 (Flask) 一切正常(我的 Chrome 中的 URL 开箱即用)在 Windows 上无需进一步配置)。
我的问题是,我还可以使用 LAN 上的 IP 号码暴露 8080 来测试我用手机构建的 UI(灵感 here )。试图这样做,反过来,引导我herehere )。
都好?没那么多,因为:
Ubuntu:

$ lsb_release -a
No LSB modules are available.
Distributor ID: Ubuntu
Description: Ubuntu 20.04.4 LTS
Release: 20.04
Codename: focal

$ ip addr | grep eth0
4: eth0: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc mq state UP group default qlen 1000
inet 172.24.76.40/20 brd 172.24.79.255 scope global eth0
Flask 服务器工作(这里是 Ubuntu,但与 Windows Powershell 相同)
$ curl http://172.24.76.40:5000
<html>
<head>
<title>Test file upload</title>
<style>
body {
:

但是,对我来说有点莫名其妙:
$ curl http://172.24.76.40:8080
curl: (7) Failed to connect to 172.24.76.40 port 8080: Connection refused
然而:
$ curl http://localhost:8080
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="/favicon.ico">
当然 http://172.24.76.40:8080也无法从 Windows 10 上的 Chrome 访问。
Flask(端口 5000)可以从 Windows 上的 Chrome 访问,甚至可以从我的 Android 手机(当然是 Windows IP: http://192.168.1.156:5000)在同一个局域网上访问(那是在我进入 Windows 防火墙打开端口并做了这个端口之后在 powershell 中转发:
PS C:\WINDOWS\system32> netsh interface portproxy add v4tov4 listenport=5000 listenaddress=0.0.0.0 connectport=5000 connectaddress=172.24.76.40
亲爱的网络奇才,我疯了吗?我错过了什么?
谢谢

最佳答案

好的,我找到了解决方案,相信我,这是一个很大的问题,因为解决方案是在一个与我预期完全不同的地方找到的。
由于我的后端和前端运行在同一个本地主机上,CORS 抬起了丑陋的头,让我很难受。我已经用 this approach 解决了这个问题。一段时间回来。我几乎不知道这也引入了一个已经被忽视了很长一段时间的令人讨厌的副作用(使该 IP 上的服务器看起来无法访问!)。简而言之,这不是网络问题,尽管它看起来很像!
我的解决方案是更改 vue.config.js从此文件:

devServer: {
proxy: 'http://localhost:5000/',
host: 'localhost'
},
对此:
devServer: {
proxy: {
"/upload": {
target: "http://localhost:5000"
}
}
},
我确信 React.js 开发人员可能会发现自己处于类似情况。现在你知道在哪里看。其他框架的用户也是如此。

关于vue.js - 访问 WSL2 Vue.js 服务器 (localhost :8080) exposing NATted IP number externally,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72520244/

34 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com