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

Question

我正在构建我的第一个 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 中配置它。任何指针？我是以错误的方式接近这个吗？

我知道我可以将相关的 CORS headers 添加到我的 API 回复中，但我认为这不是正确的方法。此 API 由多个应用程序使用，不得更改以安抚特定消费者。

Answer 1

正如 Ashley Grant 所指出的，这与 Aurelia 没有任何关系。我想这只是 Aurelia-CLI 生成的代码，当你 select “默认 ESNext / Typescript 应用程序”（或“自定义”，然后是平台的“Web”）时，没有提供设置代理路径的快速方法。

此默认 starter-code 使用 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，其中包含构建和运行服务器的任务，以及重建和重新加载以响应使用 browserSync 的源文件更改，使用 gulp-live-server 至运行通过 server.js

表达

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

Aurelia: Configure proxy path for API calls

fetch

cors

aurelia