Electron-vue: can not request api with https

[koolay]

I'm sure that the api is ok, since I tested it by Postman.

But the request had an error with vue-resource": "^1.0.3".

vue-resource.common.js?db26:1071 POST https://xxxxxx/api/login 
net::ERR_INSECURE_RESPONSE

the code

  import Vue from 'vue'

 export default {

  request (method, url, data, successCb = null, errorCb = null) {
    return Vue.http[method](url, data).then(response => {
      successCb(response.body)
    }, error => {
      if (errorCb) {
        errorCb(error)
      } else {
        alert(JSON.stringify(error))
      }
    })
  }

 }

[SimulatedGREG]

@koolay

Sorry for the late reply.

This is might only be an issue when in development since your code is being served through webpack-dev-server which uses the http protocol. But on another note, is there any reason you are needing to abstract the Vue.http API? Why not just use this.$http within your Vue component files?

[koolay]

@SimulatedGREG

https work well on windows and linux, only not work on osx. I will check their versions.

[SimulatedGREG]

Going to go ahead a close this. Comment back if you have more info.

[ghost]

@koolay have you found a solution for that issue? I can't get it work on mac either, in dev mode... production is fine.

@SimulatedGREG here is my code:

this.$http.get('https://secure.runrun.it/api/v1.0/tasks/' + taskId, {
  headers: {
    'app-key': '<APP-KEY>',
    'user-token': '<USER-TOKEN>'
  }})

I've tried to change the webpack-dev-server config on dev-runner.js file, but it didn't work too, in this part:

const server = new WebpackDevServer(
  compiler,
  {
    contentBase: path.join(__dirname, '../'),
    setup (app, ctx) {
      app.use(hotMiddleware)
      ctx.middleware.waitUntilValid(() => {
        resolve()
      })
    }
  }
)

server.listen(9080)

I'm getting this:
:9080:1 XMLHttpRequest cannot load https://secure.runrun.it/api/v1.0/tasks/<TASK-ID>. Request header field app-key is not allowed by Access-Control-Allow-Headers in preflight response.

Appreciate any help

[SimulatedGREG]

@akendy

The error log you posted above doesn't immediately call out that the request needs to be secure, and seems to be more focused on the header being set improperly. But based on the webpack-dev-server documentation, you can add https: true to the configuration options to enable a self-signed server for development.

const server = new WebpackDevServer(
  compiler,
  {
    contentBase: path.join(__dirname, '../'),
    https: true,
    setup (app, ctx) {
      app.use(hotMiddleware)
      ctx.middleware.waitUntilValid(() => {
        resolve()
      })
    }
  }
)

[ghost]

@SimulatedGREG

Thanks for you reply, but as I mentioned before, I tried adding that, but it didn't work too.
Actually, nothing shows up when I run npm run dev.. after adding that https: true in dev-runner.js file

[SimulatedGREG]

@akendy

After adding https: true, you would also need to edit src/main/index.js to point to the proper https url. Sorry, forgot to add that part.

https://github.com/SimulatedGREG/electron-vue/blob/master/template/src/main/index.js#L17

[ghost]

@SimulatedGREG

Nothing shows up, it gives me a blank page after changing those files:

dev-runner.js

const server = new WebpackDevServer(
      compiler,
      {
        contentBase: path.join(__dirname, '../'),
        https: true,
        setup (app, ctx) {
          app.use(hotMiddleware)
          ctx.middleware.waitUntilValid(() => {
            resolve()
          })
        }
      }
    )

    server.listen(9080)

index.js

const winURL = process.env.NODE_ENV === 'development'
  ? `https://localhost:9080`
  : `file://${__dirname}/index.html`

[SimulatedGREG]

@koolay

It looks like electron denies self-signed certificates by default, but here's how you can get around this...

src/main/index.dev.js

require('electron').app.on('certificate-error', (event, webContents, url, err, certificate, cb) => {
  if (err) console.error(err)

  /* eslint-disable */
  if (url === 'https://localhost:9080/') {
    event.preventDefault()
    cb(true)
  } else {
    cb(false)
  }
})

[ghost]

@SimulatedGREG

It doesn't work either. I'm still getting the same error:

:9080:1 XMLHttpRequest cannot load https://secure.runrun.it/api/v1.0/tasks/<TASK-ID>. Request header field app-key is not allowed by Access-Control-Allow-Headers in preflight response.

However, there is a new error message in console:

┏ Electron -------------------

  net::ERR_CERT_AUTHORITY_INVALID

┗ ----------------------------

[SimulatedGREG]

The error log from electron is a notice that the SSL certificate is invalid because it is self-signed, which is expected. Back to the issue and just as I originally stated, this doesn't look like an issue that would be fixed with HTTPS/SSL. The error specifically states that the app-key is not allowed by Access-Control-Allow-Headers. The server you are connecting to is being consumed incorrectly or is expecting something different that what you are sending. The scope of this issue is outside of electron-vue is purely based on the external API you are using.

[ghost]

@SimulatedGREG

But it works when I build the packages, it doesn't work only in dev mode, production is fine.

[SimulatedGREG]

That is probably due to the fact that when in production files are served over the file:// protocol as opposed to http:// during development. When making requests to an external api when not using http://, checks like CORS and Access-Control-Allow-Headers are usually bypassed.