唐伯虎 发表于 2021-6-28 17:09:47

thinkjs全局设置所有请求都允许跨域处理

  在开发环境的时候我们是要处理跨域这个问题的。
  如果我们在开发环境要进行跨域处理想要一劳永逸该怎么办呢?
  本文介绍的是thinkjs解决跨域的方法。有俩种方法,第二种是最省事的。
第一种方法:写一个父类方法进行继承使用。
  如果在不引入任何依赖的情况下我们可以这么做:
在你的src/controller/base.js里面追加一个方法专门处理跨域的:
module.exports = class extends think.Controller {
__before() {

}

setCorsHeader() {
this.header('Access-Control-Allow-Origin', this.header('origin') || '*');
    this.header('Access-Control-Allow-Headers', 'x-requested-with');
    this.header('Access-Control-Request-Method', 'GET,POST,PUT,DELETE,OPTIONS');
    this.header('Access-Control-Allow-Credentials', 'true');
}
}
  然后你的每个自己的controller都继承这个base.js再调用他的setCorsHeader方法那么就可以实现共用了。
  文件目录:src/controller/user.js
const Base = require('./base');

module.exports = class extends Base {
// 获取用户列表
async queryUsersAction() {
this.setCorsHeader(); // 调用从base.js继承来的方法
    const user = this.ctx.model('user');
    const res = await user.getList();
    return this.success(res);
}
};
第二种方法:安装依赖进行使用
  1.安装 kcors 包。
$ npm install kcors -S
  2.使用中间件
/src/config/middleware.js
const path = require('path');
const isDev = think.env === 'development';
const kcors = require('kcors');

module.exports = [
{
    handle: 'trace', // trace 中间件最好放在最前面,否则在 trace 之前的错误没办法 catch 到。
    enable: !think.isCli,
    options: {
      debug: isDev
    }
},
{
    handle: kcors, // 全局处理跨域,所有请求都会允许跨域,如果想要进行相关配置请看kcors文档进行配置
    options: {
      origin: '*',
      credentials: true,
      allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH'
    }
},
{
    handle: 'meta',
    options: {
      logRequest: isDev,
      sendResponseTime: isDev
    }
},
{
    handle: 'resource',
    enable: isDev,
    options: {
      root: path.join(think.ROOT_PATH, 'www'),
      publicPath: /^\/(static|favicon\.ico)/
    }
},
{
    handle: 'payload',
    options: {}
},
{
    handle: 'router',
    options: {}
},
'logic',
'controller'
];
  如果所有的请求都允许跨域的话第二种方法是最省事的~可以直接使用。如果要进行部分限制那就使用第一种,稍微麻烦点!
  如果本文帮助到您了欢迎给个三连。哈哈哈【吴小迪在线求三连】

  
页: [1]
查看完整版本: thinkjs全局设置所有请求都允许跨域处理