nginx 跨域

Nginx 跨域基础概念

跨域资源共享（CORS）是一种机制，允许Web应用程序从不同的源（域）请求资源。由于浏览器的同源策略，默认情况下，JavaScript只能访问与其自身来源相同的资源。CORS通过在服务器端设置特定的HTTP头来允许跨域请求。

相关优势

1. 安全性：CORS提供了一种细粒度的控制方式，允许服务器指定哪些源可以访问资源。
2. 灵活性：开发者可以根据需要配置哪些HTTP方法和头部信息可以被跨域请求使用。
3. 兼容性：现代浏览器广泛支持CORS，使得跨域请求成为可能。

类型

• 简单请求：满足特定条件的请求（如GET、POST方法，且HTTP头部信息有限）可以直接发送，浏览器会自动添加必要的CORS头部。
• 预检请求：对于不满足简单请求条件的请求，浏览器会先发送一个OPTIONS请求进行预检，以确认服务器是否接受实际的请求。

应用场景

• Web API服务：当你的前端应用和后端API部署在不同的域上时，需要使用CORS来允许跨域请求。
• 单页应用（SPA）：SPA通常通过AJAX与后端交互，如果后端服务不在同一域，就需要处理跨域问题。

遇到的问题及原因

常见的问题包括：

• No 'Access-Control-Allow-Origin' header is present on the requested resource：服务器没有设置允许跨域的头部信息。
• The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '' when the request's credentials mode is 'include'：当请求包含凭证（如cookies）时，不能使用通配符''作为允许的源。

解决方法

在Nginx配置文件中添加或修改以下设置来解决跨域问题：

server {
    listen 80;
    server_name example.com;

    location /api {
        add_header 'Access-Control-Allow-Origin' 'http://yourfrontend.com';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Origin, Content-Type, Accept, Authorization';
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' 'http://yourfrontend.com';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'Origin, Content-Type, Accept, Authorization';
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            add_header 'Content-Length' '0';
            return 204;
        }
        proxy_pass http://backend_server;
    }
}

解释

• Access-Control-Allow-Origin：指定允许访问资源的源。
• Access-Control-Allow-Methods：允许的HTTP方法。
• Access-Control-Allow-Headers：允许的HTTP头部信息。
• if ($request_method = 'OPTIONS')：处理预检请求，返回204状态码表示预检成功。

通过这样的配置，Nginx将能够正确处理跨域请求，允许指定的源访问后端资源。