Midwayjs（v3.0.0）跨域问题

Midwayjs是一个基于Node.js的服务端框架，它提供了一套完整的开发体验。在Midwayjs v3.0.0中，跨域问题通常是通过Midway提供的装饰器或者中间件来解决的。

跨域问题的解释：

当一个源（如浏览器）从与自身不同的源（域名、协议、端口）的服务器请求资源时，会发起跨源HTTP请求。如果服务器没有通过CORS头部来明确允许这样的请求，浏览器会阻止这样的请求。

解决方法：

使用Midway提供的@Cors()装饰器。你可以在Controller或者Function方法上使用这个装饰器来开启CORS支持。




import { Provide, Controller, Get, Cors } from '@midwayjs/decorator';
 
@Provide()
@Controller('/api')
export class ApiController {
  @Get('/hello')
  @Cors() // 开启CORS
  async hello() {
    return 'Hello World!';
  }
}

使用全局CORS配置。在src/config/config.default.ts中配置CORS。




export default {
  // ...
  cors: {
    origin: '*', // 或者指定特定的域名
    allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH',
  },
  // ...
};

使用中间件。在Midway中，你可以创建一个全局中间件来处理CORS。




// src/middleware/cors.ts
import { Context, Next } from '@midwayjs/koa';
 
export async function corsMiddleware(ctx: Context, next: Next) {
  ctx.set('Access-Control-Allow-Origin', '*');
  ctx.set('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With');
  ctx.set('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
 
  if (ctx.method === 'OPTIONS') {
    ctx.body = 204;
    return;
  }
 
  await next();
}
 
// src/configuration.ts
import { Configuration, App } from '@midwayjs/decorator';
import { IWebMiddleware } from '@midwayjs/koa';
import { corsMiddleware } from './middleware/cors';
 
@Configuration({
  // ...
})
export class ContainerLifeCycle {
  @App()
  async getMiddlewareList(app): Promise<IWebMiddleware[]> {
    return [
      {
        resolve: () => corsMiddleware,
        global: true,
      },
      // ...
    ];
  }
}

以上方法可以解决跨域问题，确保你的应用允许来自特定源或任何源的跨域请求。在实际应用中，出于安全考虑，建议将origin设置为特定的域名或通过函数来进行更细粒度的控制。

Midwayjs（v3.0.0）跨域问题

评论已关闭

推荐阅读