跨域哪些事——5.使用Nginx解决跨域 - 文章 - 开发者社区

如果还不了解跨域和同源策略的同学，可以去看一下第一篇，链接如下：跨域哪些事——1.如果没有跨域，世界会是怎样？ - 文章 - 开发者社区 - 火山引擎 (volcengine.com)

1.简介

咱们首先介绍一下nginx,Nginx（发音同“engine X”）是异步框架的网页服务器，也可以用作反向代理、负载平衡器和HTTP缓存。该软件由俄罗斯程序员伊戈尔·赛索耶夫（Игорь Сысоев）开发并于2004年首次公开发布。2011年成立同名公司以提供支持服务。2019年3月11日，Nginx公司被F5网络公司以6.7亿美元收购。

Nginx是免费的开源软件，根据类BSD许可证的条款发布。一大部分Web服务器使用Nginx，通常作为负载均衡器。genj

根据著名的咨询机构netcraft今年（2023年）2月28日发布的最新web服务器市场占用率，nginx已26.11%的市场占有率排名第一。

picture.image

nginx解决跨域也是一个比较彻底和常用的解决方案，下面我们就介绍一下。

2.原理

看一下下面两张图，nginx只是起了一个中间人的作用，把本来2个域的A、B两个服务由nginx代理后，变成了1个C服务，所有的页面和接口在浏览器看来都属于C服务，所以也就不存在什么跨域问题。这里面有个一个限制条件，就是AB连个服务的接口和静态资源是要有特殊标识的，只有这样nginx在接到前端的请求后才知道转发给哪个服务。比如A服务的请求前缀都是/api1，静态资源前缀都是/source1,比如B服务的请求前缀都是/api2，静态资源前缀都是/source2。

picture.image

3.实例

下面是nginx的一个跨域的配置示例。我们可以看到，nginx的跨域，其实是CROS跨域的一种实现而已，nginx只是因为常用，只有符合CROS这种规范，是后端代码中写对应配置，还是nginx配置，或者是nodejs配置，都是基于CROS规范做的实现。如果不了解CROS的，可以看之前的文章：跨域哪些事——4. 使用CROS实现跨域 - 文章 - 开发者社区 - 火山引擎 (volcengine.com)

server{

listen 80;

server_name localhost;

location /api1 {

proxy_pass http://www.a.com;

# 指定允许跨域的方法，*代表所有

add_header Access-Control-Allow-Methods *;

# 预检命令的缓存，如果不缓存每次会发送两次请求

add_header Access-Control-Max-Age 3600;

# 带cookie请求需要加上这个字段，并设置为true

add_header Access-Control-Allow-Credentials true;

# 表示允许这个域跨域调用（客户端发送请求的域名和端口）

# $http_origin动态获取请求客户端请求的域 不用*的原因是带cookie的请求不支持*号

add_header Access-Control-Allow-Origin $http_origin;

# 表示请求头的字段 动态获取

add_header Access-Control-Allow-Headers

$http_access_control_request_headers;

# OPTIONS预检命令，预检命令通过时才发送请求

# 检查请求的类型是不是预检命令

if ($request_method = OPTIONS){

return 200;

}

}

}

4.总结

nginx跨域是一种比较彻底的跨域手段，无论是前后端跨域请求的解决，还是前端访问另一个域的前端，都可以用nginx去解决，但是有一个限制条件，就是需要不同的域的请求和静态资源都需要特殊标识。