时间戳

首页 > 解决方案 > 电容Android不加载http javascript源

javascript - 电容Android不加载http javascript源

问题描述

我试图在http://127.0.0.1:4002/的 URL 下从我的本地 Web 服务器加载远程脚本/css

但似乎在电容器 android 中有错误，电容器 ios 工作正常。我还设法从没有任何错误的情况下加载 css https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap-grid.min.css

我猜不支持http？

这是我加载它的代码

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap-grid.min.css" />
        <link href="http://127.0.0.1:4002/test/fonts.css" rel="stylesheet" />
        <meta charset="utf-8" />
        <meta
            name="viewport"
            content="initial-scale=1, maximum-scale=1.0, minimum-scale=1.0, width=device-width, height=device-height, viewport-fit=cover,  user-scalable=no"
        />
        <title>My Title</title>
    </head>

    <body id="body">
        
    </body>
</html>

这是我在“chrome://inspect/#devices”下遇到的错误 在此处输入图像描述

我的依赖：

"@capacitor-community/http": "^1.0.0-alpha.1",
"@capacitor/android": "^3.0.0-rc.0",
"@capacitor/cli": "^3.0.0-rc.0",
"@capacitor/core": "^3.0.0-rc.0",
"@capacitor/device": "^0.5.5",
"@capacitor/dialog": "^0.4.5",
"@capacitor/filesystem": "^0.5.1",
"@capacitor/ios": "^3.0.0-rc.0",

我的电容器.config.json

{
    "appId": "com.example.app",
    "appName": "hello-cap-2",
    "bundledWebRuntime": false,
    "npmClient": "npm",
    "webDir": "www",
    "plugins": {
        "SplashScreen": {
            "launchShowDuration": 0
        }
    },
    "server": {
        "allowNavigation": ["*"]
    },
    "android": {
        "allowMixedContent": true
    },
    "cordova": {}
}

标签： javascriptandroidhttphttpscapacitor

解决方案

在https://github.com/ionic-team/capacitor/discussions/4477得到了答案

127.0.0.1 是你的电脑，iOS 模拟器理解它，因为模拟器运行在你的电脑上，但是在 Android 上，模拟器是一个拥有自己网络的“虚拟机”，所以 127.0.0.1 是它自己的模拟器，而不是你的电脑。

您可以启用端口转发以将 4002 端口流量发送到模拟器，或者您可以使用 10.0.2.2 IP，因为它会自动循环到 127.0.0.1

https://developer.android.com/studio/run/emulator-networking

另外，请注意，由于同样的原因，使用 127.0.0.1 将无法在真实设备上使用，最好使用计算机的本地 IP，例如 192.168.1.30

推荐阅读