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

【问题标题】：Aurelia: Configure proxy path for API callsAurelia：为 API 调用配置代理路径
【发布时间】：2021-02-08 03:41:33
【问题描述】：

我正在构建我的第一个 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 的方法曾经是在 Web 服务器中为 API 调用设置代理路径，如：

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

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

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

【问题讨论】：

Aurelia 仅在浏览器中运行，它没有服务器。您需要告诉我们您使用什么服务器来为您的应用程序提供服务。
@AshleyGrant 谢谢！我认为你让我走上了正确的道路。我使用 aurelia-cli 创建项目，选择“Web”作为目标平台。我可以看到它使用 webpack-dev-server，我不想使用它，因为它仅用于开发。我将其更改为使用 express 代替。我目前正在尝试使用gist.github.com/zewa666/ca1d5b0cf1fdccd5f756948fa64c66dd 作为指南进行自动构建和browserSync。找到满意的解决方案后，我会发布这个问题。

标签： cors fetch aurelia

【解决方案1】：

正如Ashley Grant 指出的那样，这与Aurelia 没有任何关系。我想这只是 Aurelia-CLI 生成的代码，当您选择“默认 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 运行 Express

【讨论】：