一、概述

跨域资源共享 (CORS, Cross-Origin Resource Sharing) 是一种机制，它允许一个域名下的网页资源被来自另一个域名的网页所访问。
这在现代 web 开发中非常常见，因为前端和后端通常托管在不同的服务器上。然而，默认情况下，浏览器会阻止跨域请求，导致开发者在实现前后端分离时遇到跨域问题。
本文将通过 Nginx 来解决这个问题，详细讲解步骤，适合刚接触 Nginx 和 CORS 的新手。

二、什么是 CORS？

CORS 是一种浏览器安全机制，用于决定 Web 应用是否能够跨域请求资源。
通过设置特定的 HTTP 头部信息，服务器可以允许特定的域名访问资源。

三、常见的跨域场景

假设你的前端应用托管在

1. https://frontend.example.com

复制代码

，而后端 API 服务托管在

1. https://api.example.com

复制代码

。
当前端尝试从后端获取数据时，如果没有正确配置 CORS，浏览器将会阻止这个请求。

四、Nginx 如何解决 CORS 问题？

Nginx 作为一个高性能的 HTTP 和反向代理服务器，能够通过简单的配置来解决 CORS 问题。
以下是一个基础的 Nginx 配置示例，用于处理简单的 CORS 请求。

五、基础配置

1.编辑 Nginx 配置文件
找到你的 Nginx 配置文件，一般位于

1. /etc/nginx/nginx.conf

复制代码

或

1. /etc/nginx/conf.d/your-site.conf

复制代码

。
2.添加 CORS 配置
在服务器块中添加以下配置：

1. server {
   
2.     listen 80;
   
3.     server_name api.example.com;
   
4. 
   
5.     location / {
   
6.         add_header 'Access-Control-Allow-Origin' '*';
   
7.         add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
   
8.         add_header 'Access-Control-Allow-Headers' 'Origin, Authorization, Content-Type, Accept, X-Requested-With';
   
9. 
   
10.         # 如果请求方法为 OPTIONS，则直接返回 204 状态码
    
11.         if ($request_method = 'OPTIONS') {
    
12.             add_header 'Access-Control-Allow-Origin' '*';
    
13.             add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    
14.             add_header 'Access-Control-Allow-Headers' 'Origin, Authorization, Content-Type, Accept, X-Requested-With';
    
15.             return 204;
    
16.         }
    
17. 
    
18.         proxy_pass http://backend_server;
    
19.     }
    
20. }

复制代码

这里，我们做了几件事：

• Access-Control-Allow-Origin：允许来自任何源的请求。你可以将
  1. *

  复制代码
  替换为特定的域名以限制请求来源。
  
• Access-Control-Allow-Methods：指定允许的 HTTP 方法。
  
• Access-Control-Allow-Headers：指定请求中可以使用的自定义头部字段。
  
• OPTIONS 请求处理：浏览器在发送某些请求时，会先发送一个预检请求 (OPTIONS)，我们在这里直接返回 204 状态码，不做任何处理。
  

3.重新加载 Nginx
配置完成后，保存文件并重新加载 Nginx 配置：

1. sudo nginx -s reload

复制代码

六、 图解流程

以下是 Nginx 处理 CORS 请求的流程图：

1.    +-------------------+        +---------------------+
   
2.    | Browser (Frontend)|        | Nginx Server        |
   
3.    +-------------------+        +---------------------+
   
4.             |                          |
   
5.             |    1. Request API        |
   
6.             |------------------------->|
   
7.             |                          |
   
8.             |   2. Check CORS Headers  |
   
9.             |<-------------------------|
   
10.             |                          |
    
11.             |   3. Response with Data  |
    
12.             |<-------------------------|
    
13.             |                          |
    
14.    +-------------------+        +---------------------+

复制代码

七、进一步优化

对于复杂的跨域请求，可能需要更复杂的配置。
例如，如果你只想允许特定的域名访问 API，你可以将

1. Access-Control-Allow-Origin

复制代码

的值设置为指定的域名。

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

复制代码

八、总结

通过以上配置，你已经可以用 Nginx 轻松处理 CORS 问题。
这是处理前后端分离项目中的常见需求。
通过理解 CORS 和 Nginx 的配置，能够让你更好地应对实际开发中的挑战。

九、常见问题

Q: 为什么我的配置不生效？
A: 请检查 Nginx 是否正确加载了配置文件，并且没有拼写错误。你可以通过命令

1. nginx -t

复制代码

来测试配置文件的语法。
Q: 我可以允许多个域名吗？
A: 可以，但需要动态设置

1. Access-Control-Allow-Origin

复制代码

头部，这通常需要在后端代码中处理。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源：互联网
免责声明：如果侵犯了您的权益，请联系站长（1277306191@qq.com），我们会及时删除侵权内容，谢谢合作！