曾彪彪的个人博客 -- Nginx 跨域访问配置

最近在一个项目中遇到网站跨域访问的问题，花了半天时间来研究，并记录一下：

### 问题：

两个网站，A网站需要调用B网站的restful API，B网站采用oauth2.0 进行授权，所以A网站在访问B网站时，需要在请求头中加入Authorization: bear token。

### 解决方案1-添加跨域注解：

B网站是一个Spring Boot项目，可以在B网站中对需要进行跨域访问的API加入CrossOrigin注解

```java
@CrossOrigin("*")
@RequestMapping("/user")
class UserController {
    
}
```

这种方案最简单，但是需要修改源代码，并重新部署。因为我们使用了Nginx作为反向代理，所以决定通过修改Ningx配置达到目的。

### 解决方案2-修改Nignx 配置

因为我们使用了Nginx作为反向代理，而Nginx修改配置后可以热加载，所以对线上项目更小，并且将来如果需要添加更多的跨域配置，都不用修改源代码，重新部署。

##### 跨域原理

先来谈谈跨域原理，A网站如果要能够跨域访问B网站，那么B网站的response header中，必须包含以下值：

```http
Access-Control-Allow-Origin: *
```

后边的\*表示允许所有网站对B网站进行跨域访问，如果你只允许某几个网站对B网站进行跨域访问，那么把\*改成对应的域名即可，中间用空格分开，如

```http
Access-Control-Allow-Origin: 'https://www.baidu.com' 'https://www.taobai.com' 
```

对于跨域访问的某些请求，在发送正式请求之前，浏览器会先向服务器发送一个OPTIONS类型的预检请求，对服务器进行询问，是否支持我接下来要发送的请求。如果服务器回复支持，那么浏览器就继续发送正式请求，如果服务器回复不支持，那么浏览器就不会发送正式请求了。

对于什么时候浏览器会发送OPTIONS，请参考[什么时候发送options请求](https://juejin.cn/post/6844903821634699277)

在我们这个case中，因为B网站是采用oauth2.0进行校验的，A网站在发送请求时，需要在header中加上Authorization: bear token，这满足浏览器发送option请求的条件。所以服务器需要首先对options进行回复，告诉浏览器其是否支持它接下来的请求。

##### 解决方案

让Nginx服务器来处理options请求，将正式请求转发到B网站。

Nginx配置如下：

```shell
server {
    listen 443 ssl;
    server_name website-b.com;  
    # 对B网站添加A网站的跨域访问支持
    add_header 'Access-Control-Allow-Origin' https://www.website-a.com;
    add_header 'Access-Control-Allow-Credentials' true;
    add_header 'Access-Control-Allow-Headers' *;
    add_header 'Access-Control-Allow-Methods' *;
    add_header 'Access-Control-Expose-Headers' *;

location / {
        # 所有的OPTIONS请求，返回204,
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' *;
            add_header 'Access-Control-Allow-Methods' *;
            add_header 'Access-Control-Allow-Headers' *;
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain; charset=utf-8';
            add_header 'Content-Length' 0;
            return 204;
        }
        
        proxy_pass http://website-b-backend/;
    }
}

upstream website-b-backend {
    server 10.96.0.3:80 max_fails=1 fail_timeout=3s;
}
```

---

转自[曾彪彪的个人博客](https://zengbiaobiao.com/article/detail/34)，转载请注明出处。

Nginx 跨域访问配置

评论(0)