节点/角度CORS问题[重复]答案

【问题标题】：Node/ Angular CORS issue [duplicate]节点/角度CORS问题[重复]
【发布时间】：2020-05-31 21:49:06
【问题描述】：

所以我遇到了这个奇怪的问题。我有一个托管在服务器上的 Node/Angular 应用程序，在同一个端口上工作。但仅在一个页面上，存在 CORS 错误。

到目前为止，我已经在 app.js 中的 routes 之前添加了允许的 CORS。

代码：

const apiRoutes = require("./routes/api");

app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  res.header(
    "Access-Control-Allow-Headers",
    "Content-Type, Authorization, Content-Length, X-Requested-With, cache-control"
  );
  res.setHeader(
    "Access-Control-Allow-Methods",
    "GET,POST,PATCH,DELETE,OPTIONS,PUT"
  );
  next();
})

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

app.use('/uploads', express.static(path.join(__dirname, './uploads')));

app.use('/api', apiRoutes);

我也使用了 cors npm 包并允许它使用它，但仍然没有运气。

附上同目录获取同一张图片的请求参数。

Response param when the image is accessed on page 1

Response param when the same image is blocked CORS

Image for error

编辑：

const cors = require('cors');
app.use(cors());
app.options('*', cors());

这个我也用过，但是也没用。

来自同一来源的请求被阻止，

Access to image at 'https://www.pay2mate.com/uploads/1579836295281-Affinity_Logo.png' from origin 'https://pay2mate.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

【问题讨论】：

这能回答你的问题吗？ Why doesn't adding CORS headers to an OPTIONS route allow browsers to access my API?
www.pay2mate.com 和 pay2mate.com 实际上是同一台服务器吗？如果是这样，您为什么不直接从 www.pay2mate.com 而不是 pay2mate.com 运行您的前端应用程序？如果您这样做，它们将是同源的，并且您不需要启用 CORS 的服务器。
@sideshowbarker 非常感谢。我已经被困在这里 2 天了。

标签： node.js angular image cors

【解决方案1】：

根据您的错误；

在以下位置访问图像 'https://www.pay2mate.com/uploads/1579836295281-Affinity_Logo.png' 来自原点“https://pay2mate.com”已被 CORS 策略阻止：否 'Access-Control-Allow-Origin' 标头出现在请求的资源。

您可能混淆了 NodeJS API 和 Web 服务器本身之间的区别。

由于您的代码显示您请求的图像是由 Apache（网络服务器）而不是您的 NodeJS API 提供的；

URL: https://www.pay2mate.com/uploads/1579836295281-Affinity_Logo.png
server: Apache
accept-ranges: bytes
content-length: 5774
content-type: image/png
date: Mon, 17 Feb 2020 01:41:59 GMT
etag: "69c3450-168e-59cda4d2ef8f3"
last-modified: Fri, 24 Jan 2020 03:24:55 GMT
status: 200

无论物理文件是否存在，您都需要将所有请求定向到 .htaccess 文件中的 API，然后通过 API 流式传输文件。

或者，您可以更新您的 .htaccess 文件，为您添加此标头，然后该标头将出现在文件请求中（如果您希望像您的示例一样完全打开）；

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>

您可以在此处阅读更多相关信息； https://enable-cors.org/server_apache.html

如果这不起作用。请发布有关您的托管服务器配置和当前 .htaccess 文件内容的更多信息

【讨论】：

我也试过了，但问题仍然存在。