跨域 CORS

跨源资源共享(CORS) （或通俗地译为跨域资源共享）是一种基于HTTP头的机制，该机制通过允许服务器标示除了它自己以外的其它 origin（域，协议和端口），这样浏览器可以访问加载这些资源。

简单来说，CORS 的设置会影响前端请求跨域资源。

在 @midwayjs/web 使用

安装 egg-cors。

$ npm i egg-cors --save 

配置插件启用

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

配置 cors 插件。

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

如果只想特定域名，需要在 security 插件处配置。

// src/config/config.default.tsexport const security = {  domainWhiteList: ['http://localhost:4200'], //  允许跨域的域名};

具体请参考 cors 文档。

在 @midwayjs/koa 使用

koa 当前使用 @koa/cors 包来做。

$ npm i @koa/cors --save

然后在 configuration.ts 中直接加入中间件即可。

// configuration.ts
import { Configuration, App } from '@midwayjs/decorator';import { Application } from '@midwayjs/koa';import * as cors from '@koa/cors';
@Configuration()export class AutoConfiguration {  @App()  app: Application;
  async onReady() {    this.app.use(      cors({        origin: '*',      })    );  }}

更多配置，请参考 @koa/cors 文档。

在 @midwayjs/express 使用

使用 cors 包。

$ npm install cors --save

然后在 configuration.ts 中直接加入中间件即可。

// configuration.ts
import { Configuration, App } from '@midwayjs/decorator';import { Application } from '@midwayjs/express';import * as cors from 'cors';
@Configuration()export class AutoConfiguration {  @App()  app: Application;
  async onReady() {    this.app.use(      cors({        origin: '*',      })    );  }}

更多配置，请参考 cors 文档。

在 Serverless 场景使用

在 FC 的 HTTP 触发器下，无需配置 cors，网关自动支持 OPTIONS。

其余平台或者触发器，可以适当使用下面的代码。

函数的 CORS 可以复用 koa 的 CORS 能力。

$ npm i @koa/cors --save

然后在 configuration.ts 中直接加入中间件即可。

// configuration.ts
import { Configuration, App } from '@midwayjs/decorator';import { Application } from '@midwayjs/faas';import * as cors from '@koa/cors';
@Configuration()export class AutoConfiguration {  @App()  app: Application;
  async onReady() {    this.app.use(      cors({        origin: '*',      })    );  }}

更多配置，请参考 @koa/cors 文档。