Aurelia：配置API调用的代理路径

问题描述

我正在构建我的第一个Aurelia应用程序，并尝试按以下方式调用我的API：

const data = await this.httpClient.fetch('https://my-api-server/api/employees').then(response => response.json());

这会在浏览器中导致以下错误：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://my-api-server/employees. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

这是完全可以预期的。我迄今为止使用的所有其他JS框架（Angular，React，Vue.js，Express with vanilla JS）处理CORS的方法曾经是在网络服务器中为API调用设置代理路径，如：

If request URL starts with "/api",then remove "/api",and re-route request to "https://my-api-server"

我不知道如何在Aurelia中进行配置。有指针吗？我是否以错误的方式处理此问题？

我知道我可以在API响应中添加相关的CORS标头，但我认为这不是正确的方法。该API被多个应用程序使用，并且不得更改以适应一个特定的消费者。

解决方法

正如Ashley Grant所指出的，这实际上与Aurelia没有任何关系。我想这仅仅是Aurelia-CLI生成的代码，当您选择“默认ESNext / Typescript应用”（或“自定义”，然后选择“ Web”作为平台）时，并不能提供一种快速的方法来设置代理路径。

此默认启动代码使用webpack-dev-server服务该应用，因此我将其更改为Express，因为：

webpack-dev-server仅供开发使用
借助Express，我可以轻松地通过处理程序设置特殊路由来进行代理API调用。

入门代码已经使用webpack将应用程序构建到dist文件夹中，因此我实现了Express服务器，以便在server.js中的dist中提供文件：

'use strict';

const express = require('express');
const path = require('path');
const app = express();
const request = require('request');

app.use('/',express.static(path.join(__dirname,'dist')));
app.get('/',(_req,res) => res.sendFile(path.join(__dirname,'dist/index.html')));

app.all('/api/*',function(req,res) {
  request('https://my-api-server' + req.url.substring(4),{ 
      method: req.method,body: (req.method === 'POST' || req.method === 'PUT') ? JSON.stringify(req.body) : null
    },function(error,response,body) {
      if (error)
        res.status(500).send({ message: 'Error calling My API service: ' + (error.code ? error.code : error) });
      else
        res.status(response.statusCode).send(body);
    });
});

app.listen(9000);

运行该命令只需执行node server.js

我实际上走得更远，创建了一个gulpfile.js，其中包含用于构建和运行服务器的任务，以及使用浏览器同步响应源文件更改而重建和重新加载的方法，并使用gulp-live-server通过以下方式运行Express server.js

aurelia cors cors cors fetch fetch fetch