nuxt.js配置https及跨域

最新推荐文章于 2024-07-26 00:29:15 发布

原创最新推荐文章于 2024-07-26 00:29:15 发布 · 1.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #https #前端

本文详细介绍如何在Nuxt.js项目中配置HTTPS服务，包括生成本地证书、配置Nuxt.js项目支持HTTPS及解决跨域问题的方法。

nuxt.js配置https

生成本地使用https证书

在cmd窗口下

下载证书生成库
```
npm install -g mkcert
```
创建证书颁发机构
```
mkcert create-ca
```
创建证书
```
mkcert create-cert
```
找到证书文件

根据创建提示找到对应的证书文件，复制粘贴到nuxt项目根目录下

复制粘贴到nuxt项目下后，在nuxt.config.js文件增添配置
下载fs、path库
```
npm i fs
npm i path
```

引入fs和path

import path from 'path'
	import fs from 'fs'
	
	export default {
	  // Global page headers: https://go.nuxtjs.dev/config-head

配置https服务

  server: {
    https: {
      key: fs.readFileSync(path.resolve(__dirname, 'cert.key')),
      cert: fs.readFileSync(path.resolve(__dirname, 'cert.crt'))
    },
  },

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins

运行项目，查看https是否配置成功

https 解决跨域

axios: {
    proxy: true, // 开启代理
  },
  proxy: {
    '/api': {
      changeOrigin: true, // 开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接受请求的数据
      target: 'https://IP地址:端口号', // 允许跨域的服务器地址
      // ws:true, // 是否启用websockets
      pathRewrite: {
        '^/api': '' // 路径重新
      }
    }
  },