Aller au contenu principal
Version: 2.0.0

跨域 CORS

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

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

在 @midwayjs/web 使用

安装 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 插件处配置。

// src/config/config.default.ts
export 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 文档