前后端分离合并配置

前后端分离合并配置

开始

以react前端为例,用的http库是axios.后端用的是eggjs框架.

前后端分离跨域配置

前端配置

在项目的package.json里配置代理:

示例:

{
    ...,
    "proxy": "http://localhost:7001"
}

在添加 x-csrf-token请求头:

import http from './axios';
import cookie from 'react-cookies';
http.interceptors.request.use(config => {
  // 配置跨域请求
  config.headers['x-csrf-token'] = cookie.load('csrfToken');
  return config;
});

该token在cookie里,将它取出然后将其放到x-csrf-token里.验证时,要查看发送请求的头里是否有该字段.

示例:

后端配置

后端无需额外的配置.

前后端合并

前端配置

前端将之间的代理去掉.

但是那个请求头的配置不能去掉,这是eggjs内置的跨域防范策略配置,删去之后是无法请求成功的.

详情请看官网说明.

后端配置

前端打包后,将index.html等html文件放到eggjs项目的app/view,将其他css,js,json等静态资源文件均放到app/public下.

目录结构示例:

安装模板渲染插件

npm install --save egg-view-nunjucks

启用插件

config/plugin.js:

module.exports = {
    ...,
    nunjucks: {
    	enable: true,
    	package: 'egg-view-nunjucks',
  	},
};

配置模板渲染引擎与静态资源文件

const path = require('path');
module.exports = appInfo => {
	// 根据后缀去找相应的模板引擎
	config.view = {
		mapping: {
			'.html': 'nunjucks',
		},
	};
	// 静态资源配置
    config.static = {
    	prefix: '/',
    	dir: path.join(appInfo.baseDir, 'app/public'),
  	};
};

controller渲染html

const Controller = require('egg').Controller;

class HomeController extends Controller {
  async index() {
    const { ctx } = this;
    await ctx.render('index.html');
  }
}

赏

谢谢你请我吃糖果

微信

• 本文作者： Veng
• 本文链接： http://veng0923.github.io/2020/04/09/前后端分离合并配置/
• 版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！