midway 跨域

最近准备上手midway.js来开发点东西。开发的API，在前端（vue+axios）调用时总是提示跨域，但ajax又能调用。浪费了很多时间，在此记录一下。

midway 配置：

csrf 配置

//在”src/config/config.default.ts”，添加代码如下

export default (appInfo: EggAppInfo) => {
  const config = <DefaultConfig> {};
  ……
  // 跨域  @midwayjs/web 默认添加了此项配置的
  config.security = {
    csrf: {
      enable: false,
    },

    domainWhiteList: ['http://127.0.0.1:9384'], // 允许跨域的域名
  };
  ……
}

CORS 配置

安装 egg-cors

$ npm i egg-cors --save 

配置插件启用

// src/config/plugin.ts
exports.cors = {
  enable: true,
  package: 'egg-cors',
}

配置 cors 插件

// src/config/config.default.ts
export const cors = {
  // {string|Function} origin: '*',
  // {string|Array} allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH'
};

如果只想特定域名，需要在 security 插件处配置。详见 上面csrf

domainWhiteList: ['http://127.0.0.1:9384'], // 允许跨域的域名

vue axios

后端设置方法：

config.cors{
     credentials: true,
     origin: 'http://127.0.0.1:9384', // 注意，这个地方不能使用 * 可以使用上面介绍的函数方式，必须要包含你的前端地址
}

其他框架

参考： https://www.yuque.com/midwayj...