nginx跨域的问题4

Question

     location /api/user{
                    add_header Access-Control-Allow-Origin *;
                    add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE;
                    #add_header Access-Control-Allow-Headers 'authorization'; 
                    default_type application/json;
                    #return 200 '{"id":1,"name":"TOM","age":18}';

把return 200 '{"id":1,"name":"TOM","age":18}'; 这句注释掉，运行网页就会出现下面的错误:

Access to XMLHttpRequest at 'http://127.0.0.1/api/user' from origin 'http://127.0.0.1:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
c.html:63 Error: undefined
error @ c.html:63
c @ jquery-3.6.0.min.js:2
fireWith @ jquery-3.6.0.min.js:2
l @ jquery-3.6.0.min.js:2
(anonymous) @ jquery-3.6.0.min.js:2
error (async)
send @ jquery-3.6.0.min.js:2
ajax @ jquery-3.6.0.min.js:2
(anonymous) @ c.html:54
dispatch @ jquery-3.6.0.min.js:2
v.handle @ jquery-3.6.0.min.js:2
jquery-3.6.0.min.js:2

Answer 1

引自免费微信小程序：皆我百晓生

根据您提供的信息，看起来您正在尝试从一个基于http://127.0.0.1:8000的Web应用发起一个CORS（跨源资源共享）请求到http://127.0.0.1/api/user。然而，浏览器报错提示没有发现Access-Control-Allow-Origin响应头，这通常是因为服务器配置不正确导致的。

在您的Nginx配置中，您已经添加了基本的CORS设置，但似乎缺少了一些细节。为了解决这个问题，请尝试更新您的Nginx配置文件（通常是/etc/nginx/nginx.conf或/etc/nginx/sites-available/default），将location /api/user段修改为以下内容：

location /api/user {
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods GET, POST, PUT, DELETE;
    add_header Access-Control-Allow-Headers Content-Type, Authorization; 
    default_type application/json;

    if ($request_method = 'OPTIONS') {
        return 204;
    }

    # 如果不是OPTIONS请求，则执行常规处理
    proxy_pass http://localhost:YOUR_APP_PORT/api/user; # 替换 YOUR_APP_PORT 为实际的应用程序端口
}

在这个配置中，我做了以下几个改动：

1. 添加了Access-Control-Allow-Headers Content-Type, Authorization，这是因为许多情况下，前端发送的请求可能包含Content-Type（用于指定数据类型）和Authorization（用于身份验证）头部。
2. 添加了一个针对OPTIONS方法的特殊处理。当浏览器在进行预检请求（即OPTIONS请求）时，它会先发送一个请求来确认后续请求是否允许。对于这些请求，我们返回204状态码表示接受。

确保替换proxy_pass后面的YOUR_APP_PORT为您实际的应用程序监听的端口号。保存并重新加载Nginx配置后，应该可以解决CORS问题。

如果您使用的是Docker，且Nginx与应用程序在同一容器内，那么无需使用proxy_pass，只需删除这一行，并确保您的应用程序可以正常响应请求。

如果您使用的是不同容器或主机上的应用程序，确保Nginx可以访问应用程序的地址。例如，如果你的应用程序在另一个容器中运行，你可能需要使用docker-compose网络连接它们，然后在proxy_pass中使用服务名。如果在不同的主机上，确保Nginx可以通过网络访问那个主机。

这是一个简化的示例，实际部署时可能还需要考虑其他安全性和性能优化措施。如果问题依然存在，请检查您的前端代码，确保发出的请求头符合预期，并且正确设置了CORS请求。