对 apache 服务器的 Angular http 请求

Question

我开发了一个 Angular 2 应用程序，它应该从外部服务器请求 api，但也向本地 Apache 服务器请求。使用 jsonp 请求外部 api 并且工作正常。对于本地/内部服务器，我想使用 http 模块，因为这两个应用程序将在同一台服务器上运行。

我的问题是，在开发 Angular 时实际运行在端口 3000 上，而 Apache 在端口 80 上运行。如果我只将路径设置为（例如 /some/path）Angular 被请求到端口 3000，而没有这样的部分成立。所以我设置了完整的地址（http://localhost/some/path），但这会被检测为跨源请求并且是不允许的。

XMLHttpRequest cannot load http://localhost/gizmo/default-questions/get. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

我怎么能告诉 Angular 常规 http 端口将是 80。我认为将来所有的都将构建它不会有问题，不是吗？但我不想为所有更正而构建和替换它。这可能吗？

Answer 1

您应该让您的服务器重写请求以避免 CORS 问题。

core.gulp.task(TASK, () => {
  core.browserSync.init({
    port: core.config.browserSyncPort,
    server: {
      baseDir: (core.config.getMode() === 'start') ? ['.', 'build'] : ['build'],
      middleware: [
        rewrite([
          '^/api/(.*)$ ' + core.config.apiPhp + '/$1 [P]',
          '^/es/(.*)$ ' + core.config.esPhp + '/$1 [P]',
          '^[^\\.]*$ /index.html [L]'
        ])
      ]
    },
    open: false
  });
  core.browserSync.emitter.on('init', () => {
    // TODO: Should reload be here or inside timeout?
    core.browserSync.reload();
    setTimeout(() => {
      let link = core.link(`http://localhost:${core.config.browserSyncPort}`);
      core.mainHeading(TASK, `CTRL CLICK to open ${link}`);
    }, 1000);
  });
});

您可以在 Apache 和 NGINX 中进行类似的重写。 CORS 仅在浏览器中强制执行。