Egg.js 进阶预演篇

Egg.js 进阶篇

概要

将 Egg.js 后端项目与 Vue.js 前端项目整合

作为独立的两个项目

要将 Egg.js 后端项目与 Vue.js 前端项目整合，您需要确保两者可以相互通信。这通常涉及到设置 Egg.js 以处理跨域请求（如果前后端不在同一域名下），以及在 Vue.js 中配置 HTTP 客户端（如 Axios）以与 Egg.js 后端 API 进行交互。

以下是整合 Egg.js 后端和 Vue.js 前端的基本步骤：

步骤 1：配置 Egg.js 以允许跨域请求

如果您的前端和后端不在同一个域上，您需要在 Egg.js 中配置 CORS（跨域资源共享）。Egg.js 有一个 egg-cors 插件可以用来简化这个过程。

1.安装 egg-cors 插件：

npm install egg-cors --save

2.在 config/plugin.js 中启用 egg-cors 插件：

exports.cors = {
   
  enable: true,
  package: 'egg-cors',
};

3.在 config/config.default.js 中配置 CORS 选项：

exports.security = {
   
  csrf: {
   
    enable: false, // 如果您不使用 Egg.js 的 CSRF 保护，可以禁用它
  },
};

exports.cors = {
   
  origin: '*', // 允许所有的域名访问，或者设置为您的前端域名
  allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH',
  credentials: true, // 如果需要携带 cookie，设置为 true
};

步骤 2：在 Vue.js 中配置 HTTP 客户端

在 Vue.js 项目中，您通常会使用 Axios 作为 HTTP 客户端来发送请求到后端。如果您还没有安装 Axios，可以通过以下命令安装：

npm install axios -