使用https进行服务器端API调用的Nuxt.js问题 [英] Nuxt.js problem with server-side API call with https

问题描述

当我使用HTTP S 时，我对nuxt服务器端API调用有问题.在客户端，一切都很好，并且当我通过链接在客户端上切换页面时，API可以正常工作，但是当我按Ctrl + f5并且数据将在服务器端被预提取时，实际上没有API调用，也没有提供数据.甚至不会抛出任何错误，但是使用普通的HTTP进行一切工作都可以正常工作.

I have problem with nuxt server-side API call when im using HTTPS. On client side everyting is fine and API works when im switching pages on client side via links, but when I hit Ctrl + f5 and data will be pre-fetched on server side, there is no actually API call and data is not provided. Even no error is thrown, but eveything works just fine with plain HTTP.

在我的生产服务器上的nodejs版本-v10.9.0对于通过我的nodejs网络托管提供商提供的SNI SSL的HTTPS im，

On my production server nodejs version - v10.9.0 And for HTTPS im using SNI SSL provided via my nodejs web hosting provider

此问题类似于: https://github.com/nuxt/nuxt.js/issues/2934 除了那里提供的解决方案对我不起作用.

This problem is similar to: https://github.com/nuxt/nuxt.js/issues/2934 Except that the solution provided there does not work for me.

已

这是axios进入nuxtServerInit后进入store.js的错误:无法验证第一个证书"

This is the error im getting in store.js after axios get in nuxtServerInit: 'unable to verify the first certificate'

此后，我发现: https://forum.vuejs.org/t/nuxtserverinit-with-axios-unable-to-verify-the-first-certificate/31010

我应用了扩展axios的插件:

And I applied plugin which extends axios:

plugins/axios.js:

plugins/axios.js:

import https from 'https';

export default function ({ $axios }) {
    $axios.defaults.httpsAgent = new https.Agent({ rejectUnauthorized: false });
}

nuxt.config.js:

nuxt.config.js:

plugins: [
    '@/plugins/axios',
]

它现在在服务器端和客户端都可以使用.但是我还有另一个问题.这个解决方案安全吗?

It works now on server-side as good as on client-side. But I have another questions. Is this solution safe?

推荐答案

我发现此解决方案易于管理:

I found this solution to be easier to manage:

export NODE_TLS_REJECT_UNAUTHORIZED=0 && yarn dev --env.NODE_TLS_REJECT_UNAUTHORIZED=0

它还确保它仅在开发期间运行，在开发过程中极有可能发生自签名证书的问题.

Also it ensures that it is only run during development, where the issue with self signed certificates would most likely occur.

您还可以像这样将其添加到package.json中:

You could also add it to your package.json like so:

"scripts": {
  "dev": "export NODE_TLS_REJECT_UNAUTHORIZED=0 && nuxt --env.NODE_TLS_REJECT_UNAUTHORIZED=0",

作为插件

您还可以创建一个 plugins/axios.js 文件

import https from 'https';

export default function ({
  $axios,
  store
}) {
  const agent = new https.Agent({
    rejectUnauthorized: false
  });
  $axios.onRequest(config => {
    if (process.env.dev) {
      config.httpsAgent = agent;
    }
  });
}

请确保将插件添加到您的 nuxt.config.js 文件

Be sure to add the plugin to your nuxt.config.js file

这篇关于使用https进行服务器端API调用的Nuxt.js问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！