跨域访问（Cross-Origin Resource Sharing，CORS）是一项至关重要的Web安全策略，旨在管理不同域名之间的资源共享。当你面临需要明确允许或限制跨域请求的情况时，Nginx不仅仅是一个强大的Web服务器，它还能作为一个高效的中间层，用来配置CORS规则以及作为代理服务器，从而实现不同源之间资源的无缝传递。在本指南中，我们将深入剖析如何利用Nginx的功能，确保你的Web应用程序在多个域名之间能够安全地实现数据的共享与传输。

了解CORS

首先，让我们简要了解一下CORS的工作原理。CORS是一种安全策略，用于防止恶意网站访问其他域名下的资源。浏览器通过实施同源策略来限制来自不同源的HTTP请求。然而，在某些情况下，你需要允许跨域请求，这就是CORS发挥作用的地方。CORS通过HTTP响应头字段来配置，其中一些重要的字段包括：

  • Access-Control-Allow-Origin：指定哪些域名允许访问资源。
  • Access-Control-Allow-Methods：指定允许的HTTP请求方法。
  • Access-Control-Allow-Headers：指定允许的HTTP请求头。
  • Access-Control-Allow-Credentials：指定是否允许发送身份验证信息（如Cookie）。
  • Access-Control-Expose-Headers：指定哪些HTTP响应头可以在客户端访问。

配置Nginx支持CORS

允许所有域名访问资源

首先，让我们看看如何配置Nginx以允许来自所有域名的请求访问资源。以下是一个示例配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
server {
    listen 80;
    server_name yourdomain.com;

    location / {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
    }

    # ... 其他配置 ...
}

这将允许来自任何域名的请求访问资源，并允许发送身份验证信息。

限制特定域名访问资源

如果你只想允许特定域名的请求访问资源，可以将Access-Control-Allow-Origin字段设置为特定域名或域名列表，如下所示：

1
add_header 'Access-Control-Allow-Origin' 'https://example.com, https://anotherdomain.com';

这将只允许example.com和anotherdomain.com的请求跨域访问资源。

配置Nginx的Location块

你还可以根据需要在Nginx的location块级别配置CORS。例如，如果你只想允许某个特定路径下的资源进行跨域访问，可以像这样配置：

1
2
3
4
5
6
7
location /auth-service {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
}

这将允许/auth-service路径下的资源进行跨域访问。

通过Nginx反向代理进行跨域

除了配置CORS，Nginx还可以作为代理服务器来实现跨域资源传输。这在你需要将跨域请求代理到另一个域名下的服务器时非常有用。以下是一个示例配置：

1
2
3
4
location /api {
    # 代理请求到后端服务器
    proxy_pass http://backend-server;
}

在这个配置中，任何来自/api路径的请求都会被代理到http://backend-server，因为服务器跟服务器之间的通信不存在跨域的问题。

非开发环境的Vue的请求配置跨域

在vue的开发中，一般都是使用的axios请求框架来请求后端接口数据，而axios提供了request拦截器，所以我们的思路是从拦截器里面去添加接口的header。

下面是request.js公共请求方法文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import axios from 'axios'

service.interceptors.request.use(
  config => {
    config.headers['Access-Control-Allow-Origin'] = '*'
    config.headers['Access-Control-Allow-Credentials'] = 'true'
    config.headers['Access-Control-Allow-Methods'] = '*'
    config.headers['Access-Control-Allow-Headers'] = '*'
    return config
  },
  error => {
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

这样，在每个请求后端的接口的时候都会自动相应的跨域的header设置了。

结语

使用Nginx配置CORS和代理是确保不同域名下的应用程序能够相互通信的关键步骤。通过适当配置CORS相关的HTTP响应头字段，以及使用Nginx作为代理服务器，你可以控制允许访问的域名，允许的HTTP方法和头信息，同时实现资源的跨域传输。这些配置可以增加你的Web应用程序的灵活性和互操作性，为用户提供更好的体验。无论是构建跨域API还是处理跨域请求，Nginx是一个强大的工具，能够帮助你达到目标。