备案 立即注册

云服务器

帮助中心 >  产品文档 >  云服务器 >  服务器教程 >  Nginx 轻松破解跨域难题

欢迎来到蓝队云技术小课堂，每天分享一个技术小知识。

 

在 Web 开发中，跨域问题常常是前端和后端之间的一大障碍。尤其是前后端分离的架构中，前端和后端可能位于不同的域名或者端口上，浏览器的同源策略就会阻止跨域请求。

在这种情况下，Nginx 作为反向代理服务器，可以通过配置代理头部信息，轻松解决跨域问题。具体方法是通过配置 CORS（跨域资源共享）来允许跨域请求。

解决跨域问题的步骤

配置 Nginx 添加 CORS 头部

Nginx 可以使用 add_header 指令来为响应添加 CORS 相关的 HTTP 头部，从而允许跨域请求。通常来说，CORS 需要添加以下几个头部：

· Access-Control-Allow-Origin：允许跨域的源，*表示允许所有域名。

· Access-Control-Allow-Methods：允许的 HTTP 方法（比如 GET、POST、PUT、DELETE 等）。

· Access-Control-Allow-Headers：允许的请求头部，常见的有 Content-Type、Authorization 等。

· Access-Control-Allow-Credentials：是否允许客户端携带 cookie，通常设置为 true。

· Access-Control-Max-Age：缓存预检请求的结果时间。

Nginx 配置示例

假设前端和后端服务分布在不同的域名上，前端请求后端时需要配置跨域。你可以通过在 Nginx 配置文件中添加以下内容来处理跨域问题：

打开 Nginx 配置文件（如 /etc/nginx/nginx.conf 或者其他对应的站点配置文件），在 server 或 location 块中加入 CORS 配置：

server {

    listen 80;

    server_name your-api-domain.com;

 

    location / {

        # 允许跨域请求的源，* 表示允许所有域

        add_header Access-Control-Allow-Origin *;

 

        # 允许的请求方法

        add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';

 

        # 允许的请求头

        add_header Access-Control-Allow-Headers 'Origin, Content-Type, Accept, Authorization';

 

        # 允许客户端携带 cookies

        add_header Access-Control-Allow-Credentials true;

 

        # 预检请求的缓存时间

        add_header Access-Control-Max-Age 3600;

 

        # 处理 OPTIONS 请求（预检请求）

        if ($request_method = 'OPTIONS') {

            add_header Access-Control-Allow-Origin *;

            add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';

            add_header Access-Control-Allow-Headers 'Origin, Content-Type, Accept, Authorization';

            add_header Access-Control-Allow-Credentials true;

            add_header Access-Control-Max-Age 3600;

            return 204;

        }

 

        # 其他配置（例如，代理转发等）

        proxy_pass http://www.landui.com;

    }

}

解释：

· *Access-Control-Allow-Origin ： 允许所有域的请求。如果只想允许特定的域名跨域请求，可以把 * 改成该域名（比如 https://www.landui.com）。

· Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS'：允许的 HTTP 方法。

· Access-Control-Allow-Headers：允许客户端请求时发送的自定义头部。

· Access-Control-Allow-Credentials true：允许客户端发送 cookies。

· Access-Control-Max-Age 3600：预检请求缓存一小时，减少不必要的重复请求。

· if ($request_method = 'OPTIONS')：针对 OPTIONS 请求进行特殊处理，浏览器会先发送一个预检请求来检查服务器是否支持跨域。

重启 Nginx

配置完成后，需要重启 Nginx 使配置生效：

sudo systemctl restart nginx


蓝队云官网上拥有完善的技术支持库可供参考，大家可自行查阅，更多技术问题，可以直接咨询。同时，蓝队云整理了运维必备的工具包免费分享给大家使用，需要的朋友可以直接咨询。

更多技术知识，蓝队云期待与你一起探索。

提交成功！非常感谢您的反馈，我们会继续努力做到更好！

这条文档是否有帮助解决问题？

非常抱歉未能帮助到您。为了给您提供更好的服务，我们很需要您进一步的反馈信息：

在文档使用中是否遇到以下问题：

服务热线：
4006-75-4006(7*24小时在线)

总机直拨：
0871-63886388（工作日9:00-18:00）

Copyright © 2012 - 2025 LanDui.com. All RightsReserved.　蓝队云 版权所有

  • 蓝队微信

  • 蓝队微博

全国域名注册 航帆网 云南商机网 IDC公司大全 九机网