带有webview的电子vue不能绕过/访问Cloudflare支持的网站。

Question

我已经安装了电子视频模板，我正在经历一个特定网站的问题。这些网站在Chrome和Edge上运行，但是无法在webview中完全加载。

下面的示例是视图的整个设置。这个控制台显示，Local Storage、Session Storage和IndexedDB只有一个网站faselhd的条目，但里面没有数据。Cookies有一个带有这种数据fcuid的网站条目。

<webview id="webview_custom" :src="https://www.faselhd.co/" style="height: 100%"></webview>

据我所知，保存网站会话存在一个问题，它在正常浏览器上工作正常，但无法在webview中保存会话。

我尝试过在我的index.ejs中使用这个策略，但是没有成功。

<meta http-equiv="Content-Security-Policy" content="script-src * 'unsafe-inline' 'unsafe-eval'">

期望:网站加载并显示内容。

当前:网站保持刷新，因为会话无法保存。

package.json

{
  "name": "my-app",
  "version": "1.0.0",
  "author": "author",
  "description": "description",
  "license": null,
  "main": "./dist/electron/main.js",
  "scripts": {
    "build": "node .electron-vue/build.js && electron-builder",
    "build:dir": "node .electron-vue/build.js && electron-builder --dir",
    "build:clean": "cross-env BUILD_TARGET=clean node .electron-vue/build.js",
    "build:web": "cross-env BUILD_TARGET=web node .electron-vue/build.js",
    "dev": "node .electron-vue/dev-runner.js",
    "pack": "npm run pack:main && npm run pack:renderer",
    "pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.main.config.js",
    "pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js",
    "postinstall": ""
  },
  "build": {
    "productName": "app-electron",
    "appId": "com.username.app_electron",
    "directories": {
      "output": "build"
    },
    "files": [
      "dist/electron/**/*"
    ],
    "dmg": {
      "contents": [
        {
          "x": 410,
          "y": 150,
          "type": "link",
          "path": "/Applications"
        },
        {
          "x": 130,
          "y": 150,
          "type": "file"
        }
      ]
    },
    "mac": {
      "icon": "build/icons/icon.icns"
    },
    "win": {
      "icon": "build/icons/icon.ico"
    },
    "linux": {
      "icon": "build/icons"
    }
  },
  "dependencies": {
    "axios": "^0.18.0",
    "electron-context-menu": "^0.16.0",
    "vue": "^2.5.16",
    "vue-electron": "^1.0.6",
    "vue-router": "^3.0.1",
    "vue-tabs-chrome": "^0.5.1",
    "vuetify": "^2.2.17",
    "vuetify-loader": "^1.4.3",
    "vuex": "^3.0.1",
    "vuex-electron": "^1.0.0"
  },
  "devDependencies": {
    "ajv": "^6.5.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-minify-webpack-plugin": "^0.3.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-0": "^6.24.1",
    "babel-register": "^6.26.0",
    "cfonts": "^2.1.2",
    "chalk": "^2.4.1",
    "copy-webpack-plugin": "^5.1.1",
    "cross-env": "^5.1.6",
    "css-loader": "^0.28.11",
    "deepmerge": "^4.2.2",
    "del": "^3.0.0",
    "devtron": "^1.4.0",
    "electron": "^2.0.4",
    "electron-builder": "^20.19.2",
    "electron-debug": "^1.5.0",
    "electron-devtools-installer": "^2.2.4",
    "fibers": "^4.0.2",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "jquery": "^3.4.1",
    "lodash": "^4.17.15",
    "mini-css-extract-plugin": "0.4.0",
    "multispinner": "^0.2.1",
    "node-loader": "^0.6.0",
    "node-sass": "^4.9.2",
    "sass": "^1.26.3",
    "sass-loader": "^7.3.1",
    "style-loader": "^0.21.0",
    "url-loader": "^1.0.1",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^15.2.4",
    "vue-style-loader": "^4.1.0",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^4.15.1",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4",
    "webpack-hot-middleware": "^2.22.2",
    "webpack-merge": "^4.1.3"
  }
}

Answer 1

您使用的是默认模板electron-vue，它使用的是一个非常老的电子2.0.1，也就是Chrome 61, Node 8.9.3, V8 6.1.534.41，它对于正确支持Local Storage和Session Storage来说是非常过时的。您需要将电子更新为更新的版本。

到您现有的项目

通过运行8.1.1)

• Open将

1. electron更新为8.1.x (这将将电子更新为最新的yarn add electron .electron-vue/webpack.renderer.config.js，并在yarn add electron行将HtmlWebpackPlugin配置对象更改为：

G 217

new HtmlWebpackPlugin({
  filename: 'index.html',
  template: path.resolve(__dirname, '../src/index.ejs'),
  templateParameters(compilation, assets, options) {
    return {
      compilation: compilation,
      webpack: compilation.getStats().toJson(),
      webpackConfig: compilation.options,
      htmlWebpackPlugin: {
        files: assets,
        options: options
      },
      process,
    };
  },
  minify: {
    collapseWhitespace: true,
    removeAttributeQuotes: true,
    removeComments: true
  },
  nodeModules: false
}),

1. Open src/main/index.js和更新/添加BrowserWindow webPreferences选项，如下所示：

mainWindow = new BrowserWindow({
  height: 563,
  useContentSize: true,
  width: 1000,
  // Add these webPreferences options
  webPreferences: {
    nodeIntegration: true,
    webviewTag: true
  }
})

1. 向呈现器添加一个webview。我不得不将绑定的<webview src="...">设置为<webview :src="...">：

<template>
  <div id="app">
    <!-- <router-view></router-view> -->
    <webview id="webview_custom" src="https://www.faselhd.co/" style="height: 100%"></webview>
  </div>
</template>

<script>
  export default {
    name: 'vue-electron-webview2'
  }
</script>

<style>
  /* CSS */
  html, body, #app { height: 100% }
</style>

现在使用yarn dev运行应用程序，您将能够正确地看到网页。