Nginx 安全加固后前端请求被拦截怎么办？

Code°子睿提问于 2026-03-21 12:05:22 阅读 59

工具

我最近在部署一个 React 项目时，按照网上教程对 Nginx 做了安全加固，比如加了 Content-Security-Policy、禁用了 server_tokens、限制了 HTTP 方法。结果页面能打开，但所有 fetch 请求都被浏览器拦截了，控制台报 CSP 错误。我本地开发时完全没问题，上线后才出现这情况。

我试过调整 CSP 策略，但一放宽又怕不安全。下面是我前端发起 API 请求的代码：

const fetchData = async () => {
  const res = await fetch('/api/user/profile', {
    method: 'GET',
    headers: { 'Content-Type': 'application/json' },
    credentials: 'include'
  });
  const data = await res.json();
  console.log(data);
};

现在卡在这儿了，不知道是 Nginx 配错了还是前端要配合改什么？

Nginx

我来解答赞 5 收藏

反馈

2 条解答

希玲 Dev Lv1

嗯，这种情况通常是 CSP 策略设置得太严格导致的。首先检查一下你的 CSP 设置，确保它允许从你的 API 服务器加载资源。你提到前端请求被拦截，可能是因为 CSP 没有正确允许 fetch 请求的目标域名或路径。

假设你的 API 是在同一个域名下，但路径是 /api/*，你需要确保 CSP 中有类似这样的指令：

Content-Security-Policy: default-src 'self'; connect-src 'self' /api/;

这里的关键在于 connect-src，它定义了哪些源可以通过脚本接口加载资源。上面的例子中，'self' 允许同源请求，而 /api/ 允许对 API 路径的请求。

如果 API 在不同的域名下，比如 https://api.example.com，那么你需要这样做：

Content-Security-Policy: default-src 'self'; connect-src 'self' https://api.example.com/;

另外，确保你的 Nginx 配置没有其他地方限制了这些请求，比如 location 块里的限制。

最后，关于 credentials: 'include'，如果你需要跨域请求携带凭证（cookies 或认证信息），还需要确保服务器设置了正确的 CORS 头，比如：

Access-Control-Allow-Origin: https://yourfrontenddomain.com

Access-Control-Allow-Credentials: true

这些配置通常放在 Nginx 的 location 块里，具体位置取决于你的 API 路由。

记得在调整 CSP 和 CORS 时要逐步测试，不要一次性放开太多权限，以防引入安全风险。希望这些信息能帮到你。

2026-03-21 13:24

宇文倩云 Lv1

遇到这种情况，先别急，一步步排查。你提到前端 fetch 请求被 CSP 拦截了，那我们得检查一下 CSP 的配置。

首先，确保你的 Content-Security-Policy 头允许向你的 API 发送请求。你可能需要在 CSP 中添加 connect-src 指令来指定可以连接的源。假设你的 API 在同一个域名下，可以这样设置：

add_header Content-Security-Policy "default-src 'self'; connect-src 'self';";

如果 API 在不同的域名，你需要明确指定那个域名：

add_header Content-Security-Policy "default-src 'self'; connect-src 'self' https://api.example.com;";

另外，你提到使用了 credentials: 'include'，这意味着请求会带上 cookie 和其他认证信息。这种情况下，CSP 中的 connect-src 还需要添加 https: 或者具体的协议和域名，并且目标服务器也需要正确设置 CORS 头来允许跨域请求并包含凭证。

确保 Nginx 上为你的 API 路径设置了正确的 CORS 头，类似这样：

location /api/ {

    add_header 'Access-Control-Allow-Origin' "$http_origin";

    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

    add_header 'Access-Control-Allow-Headers' 'Origin, Content-Type, Accept, Authorization';

    add_header 'Access-Control-Allow-Credentials' 'true';



    if ($request_method = 'OPTIONS') {

        add_header 'Access-Control-Allow-Origin' "$http_origin";

        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

        add_header 'Access-Control-Allow-Headers' 'Origin, Content-Type, Accept, Authorization';

        add_header 'Access-Control-Allow-Credentials' 'true';

        add_header 'Content-Length' 0;

        add_header 'Content-Type' 'text/plain charset=UTF-8';

        return 204;

    }



    # 你的其他配置...

}

这些配置应该能解决你的问题。记得测试一下，看看是不是所有请求都能正常通过了。优化一下你的 CSP 和 CORS 设置，既能保证安全，又能不影响应用的功能。

2026-03-21 12:07