Question

我正在针对基于Node / Express / MongoDB的API（在http://localhost:4200运行）的本地实例测试Angular应用（在http://localhost:3000运行）。

我正在测试的一个端点用于允许我们的内部用户下载文件。现在，在我们实际的API URL上，我们设置了CORS策略（有关详细信息，请参见下文）-这是在VPN之后运行的内部办公应用程序。

但是当我尝试在针对该API的本地实例运行的本地应用上测试此下载功能时，出现以下错误消息：

在以下位置访问XMLHttpRequest 'http://localhost:3000/v0/filegenerator/download?emailDocId=47dh385686e780c18e905&apikey=9d98e41d-44e9-4bbb-ab3d-35b7df5272dc&token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJDUkVXTWVtYmVyIjoiNWmNoIjoiU2MDc0ODd9.bA5B5bx4wPSSiVCS_LxTK1gifjtif8dj29sfUBHqpOg' 来自来源“ http://localhost:4200”的信息已被CORS政策阻止：对预检请求的响应未通过访问控制检查：没有HTTP正常状态。

这里有几个问题：

1。）这是一般的Chrome安全错误消息吗？

2。）有什么方法可以关闭此功能，以便可以测试下载文件吗？还是只能通过点击我们实际的实时API进行测试？

如何在测试环境中最好地解决这个问题？

添加的注释：我确实有CORS扩展名-“ Allow-Control-Allow-Origin：* 1.0.3”-已安装在Chrome中，并且当前设置为“启用跨域资源共享”。

此外，在我们的后端Node / Express环境中，这是我们当前的设置：

  app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    res.header("Access-Control-Allow-Methods", "PUT, POST, GET, DELETE, OPTIONS");
    return next();
  });

Answer 1

出于测试目的，您可以使用chrome的chrome.exe --disable-web-security标志。

关闭所有镶边窗口。
运行Angular

Answer 2

这是浏览器中的常规安全功能。您无法将其关闭。解决此问题的一种方法是，通过设置Access-Control-Allow-Origin标头，将您的原始信息留在服务器端。但是，如果不单独处理预检（OPTIONS）请求，则此方法将无效。

如果这是不可能的（由于第三方库，服务，身份验证等），则可以在Angular中设置反向代理，从而允许您隧穿所有请求。在浏览器中，您的请求似乎发送到了与角度应用程序相同的域（和端口）（因此假定具有相同的来源）。

只需在您的项目中创建一个proxy.conf.js，就像这样：

const path = "/proxy_path/*";
const proxy = "/proxy_path/";

const pathRewrite = {};
pathRewrite["^" + proxy.slice(0, -1)] = "";

const configs = {
    target: 'your_service_url',
    secure: false,
    changeOrigin: true,
    pathRewrite,
    logLevel: "debug"
}

const PROXY_CONFIG = {};
PROXY_CONFIG[path] = configs;

module.exports = PROXY_CONFIG;

然后使用ng serve --host 0.0.0.0 --disable-host-check --proxy-config <PATH_TO_PROXY_CONF>启动它。

我希望这会有所帮助！

Answer 3

CORS标头基本上是服务器说“我将这些其他服务器识别为向我发送请求的源，并且对于浏览器来说应该是安全的”。如果没有标头，则只有来自同一服务器的请求才被认为是安全的。

您应该能够配置本地应用程序以将标头添加到响应中。

纯文本标题看起来像 Access-Control-Allow-Origin: localhost:4200

Angular App运行API的本地实例

3 个答案: