nginx跨域怎么做

原创

ithorizon 11个月前 (06-13) 阅读数 223 #Nginx

标题：Nginx配置实现跨域详解

在Web开发中，由于浏览器的同源策略，一个页面只能向同源（协议、域名和端口都相同）的服务器发起请求。然而，现代应用往往需要与不同的源进行数据交互，这就需要通过跨域资源共享（Cross-Origin Resource Sharing，简称CORS）来实现。Nginx作为一款强势的HTTP服务器，可以通过其灵活的配置来处理跨域请求。下面我们将详细介绍怎样在Nginx中设置跨域。

1. 基本概念

CORS允许服务器声明哪些源可以访问其资源。在Nginx中，这首要通过设置Access-Control-Allow-Origin头来实现。当客户端发起跨域请求时，服务器会检查这个头，如果允许，则响应，否则拒绝。

2. 配置示例

以下是一个基本的Nginx配置片段，用于允许所有来源的跨域请求：

```html


server {
    listen 80;
    server_name yourdomain.com;
    # 跨域设置
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
}

```

在这个例子中，`*`即所有来源都被允许，`Access-Control-Allow-Methods`指定了允许的HTTP方法（如GET, POST, PUT等），`Access-Control-Allow-Headers`则指定了允许的请求头。

3. 针对特定源的约束

如果你只想允许特定的源访问，可以替换`'*'`为具体的源，如`http://example.com`：

```html

add_header 'Access-Control-Allow-Origin' 'http://example.com';

```

4. 对于预检请求（Preflighted Requests）

对于某些特殊的跨域请求（如POST、PUT等），浏览器会先发送一个OPTIONS请求（称为预检请求），询问服务器是否允许实际请求。Nginx也需要特殊处理这些请求：

```html


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-Max-Age' 1728000; # 20天缓存
    add_header 'Content-Type' 'text/plain; charset=utf-8';
    add_header 'Content-Length' 0;
    return 204;
}

```

这部分配置会告诉服务器只处理OPTIONS请求，并且返回一个空响应。