CORS 策略已阻止从源“http://localhost:4200”访问“http://[::1]:3000/api/requests/...”处的 XMLHttpRequest

Question

我有一个项目：

• 后端使用 Loopback 4。
• 前端使用Angular。

大约 3 天前，它运行良好。 但现在它工作了。 这是错误图像：

我在服务器上尝试 cros 设置：

export async function main(options: ApplicationConfig = {
    rest: {
        cors: {
            origin: '*',
            methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
            preflightContinue: false,
            optionsSuccessStatus: 204,
            maxAge: 86400,
            credentials: true,
        },
    },
}) {
    const app = new ApartmentManagementApplication(options);
...
}

但是还是不行，求大神帮忙解决。

Answer 1

如果最近更新了 LoopBack 4，则必须更新 Sequence 以接受 Express.js 中间件：

import {inject} from '@loopback/context';
import {
  FindRoute,
  InvokeMethod,
  InvokeMiddleware,
  ParseParams,
  Reject,
  RequestContext,
  RestBindings,
  Send,
  SequenceHandler,
} from '@loopback/rest';

const SequenceActions = RestBindings.SequenceActions;

export class MySequence implements SequenceHandler {
  /**
   * Optional invoker for registered middleware in a chain.
   * To be injected via SequenceActions.INVOKE_MIDDLEWARE.
   */
  @inject(SequenceActions.INVOKE_MIDDLEWARE, {optional: true})
  protected invokeMiddleware: InvokeMiddleware = () => false;

  constructor(
    @inject(SequenceActions.FIND_ROUTE) protected findRoute: FindRoute,
    @inject(SequenceActions.PARSE_PARAMS) protected parseParams: ParseParams,
    @inject(SequenceActions.INVOKE_METHOD) protected invoke: InvokeMethod,
    @inject(SequenceActions.SEND) public send: Send,
    @inject(SequenceActions.REJECT) public reject: Reject,
  ) {}

  async handle(context: RequestContext) {
    try {
      const {request, response} = context;
      const finished = await this.invokeMiddleware(context);
      if (finished) return;
      const route = this.findRoute(request);
      const args = await this.parseParams(request, route);
      const result = await this.invoke(route, args);
      this.send(response, result);
    } catch (err) {
      this.reject(context, err);
    }
  }
}

进一步阅读

• https://github.com/strongloop/loopback-next/issues/5368#issuecomment-626233755

Answer 2

在 Angular 中使用代理绕过 CORS 问题。

当您运行ng serve时，您将使用代理，而不是从浏览器发送请求。 它将拦截您的请求并在本地机器中发送（而不是从您的浏览器）。

检查Angular.io 代理