将我的应用程序部署到云时出现 CORS 策略错误

Question

我尝试将我的 web 应用程序部署到 aws VM，在创建 vm 并安装 tomcat 之后，当我部署它时，我在 chrome 上的开发人员工具上收到此错误 从源“http://3.8.187.0:8080”访问“http://localhost:8080/FilmRestful/film-api?_=1712761555614”处的 XMLHttpRequest 已被 CORS 策略阻止：请求客户端不是安全的上下文并且资源位于更私有的地址空间中

local

。

我尝试了 chrome 的Allow-CORS扩展，但没有帮助我！我也将这些标头添加到我的 api 但仍然遇到同样的问题 response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader("Access-Control-Allow-Headers", "来源、内容类型、接受、授权"); response.setHeader("Access-Control-Allow-Credentials", "true"); response.setHeader("Access-Control-Allow-Methods", "GET、POST、PUT、DELETE、OPTIONS、HEAD"); 请问有什么建议吗？

Answer 1

常见的 CORS 错误。

当您使用网络浏览器发送请求时，请尝试在开发人员工具中打开网络选项卡并检查会发生什么。通常您会看到 2 个请求发送到您的端点。

1. 请求类型为 OPTIONS 的预检请求。
2. 您预期的请求，可能是 GET 或 POST 或其他内容。

当客户端发送 OPTIONS 请求时，目标是与服务器就客户端是否可以访问其请求的数据建立协议。这是通过您在问题中提到的访问控制标头完成的。服务器将向客户端发送回一个响应，其中包含允许的访问控制级别。

一个常见的错误是，这些标头仅在常规请求（GET、POST 等）上发回，而不是在预检 (OPTIONS) 请求期间发回。

我给你的建议：

将端点处理程序添加到您的服务中，以处理传入的 OPTIONS 请求。根据您的实现，您可能有内置框架支持。

快递示例代码：

const express = require('express');
const app = express();
const port = 3000;

// Middleware to handle CORS preflight requests
app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE,OPTIONS, HEAD');
    res.header('Access-Control-Allow-Headers', 'header1, header2...');

    if (req.method === 'OPTIONS') {
        return res.sendStatus(200);
    }

    // Pass the request to the next middleware/function
    next();
});

// Example route
app.get('/', (req, res) => {
    res.send('Hello World!');
});

app.listen(port, () => {
    console.log(`Example app listening at http://localhost:${port}`);
});

让我知道这是否有帮助！