Ubuntu跨域资源共享配置详解（手把手教你解决前端跨域问题）

什么是跨域？

当你的网页（例如运行在 http://localhost:3000）尝试向另一个域名或端口（例如 http://your-ubuntu-server.com:8080）发起请求时，浏览器会认为这是“跨域”行为。出于安全考虑，浏览器默认会阻止这类请求，除非服务器明确允许。

解决方案：在Ubuntu上配置CORS

要在Ubuntu服务器上启用CORS，你需要根据你使用的Web服务器（如Apache或Nginx）进行相应配置。下面分别介绍两种主流服务器的配置方法。

方法一：Apache服务器配置CORS

如果你的Ubuntu服务器使用的是Apache，请按以下步骤操作：

1. 确保已启用 mod_headers 模块（用于设置HTTP响应头）：

sudo a2enmod headerssudo systemctl restart apache2

2. 编辑你的网站配置文件（通常位于 /etc/apache2/sites-available/ 目录下），例如 000-default.conf，在 <VirtualHost> 块中添加以下内容：

<VirtualHost *:80>    ServerName your-domain.com    DocumentRoot /var/www/html    <Directory /var/www/html>        Options Indexes FollowSymLinks        AllowOverride All        Require all granted    </Directory>    # 启用CORS    Header always set Access-Control-Allow-Origin "*"    Header always set Access-Control-Allow-Methods "POST, GET, PUT, DELETE, OPTIONS"    Header always set Access-Control-Allow-Headers "X-Requested-With, Content-Type, X-Token"</VirtualHost>

3. 保存文件并重启Apache服务：

sudo systemctl restart apache2

⚠️ 注意：Access-Control-Allow-Origin "*" 表示允许所有域名访问。在生产环境中，建议替换为具体的前端域名，例如 "https://your-frontend.com"，以提高安全性。

方法二：Nginx服务器配置CORS

如果你使用的是Nginx，配置方式略有不同：

1. 打开你的站点配置文件（通常位于 /etc/nginx/sites-available/），例如 default。
2. 在 server 块中添加以下CORS相关头部：

server {    listen 80;    server_name your-domain.com;    root /var/www/html;    index index.html index.htm;    # CORS 配置    location / {        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' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,X-Token';            add_header 'Access-Control-Max-Age' 1728000;            add_header 'Content-Type' 'text/plain; charset=utf-8';            add_header 'Content-Length' 0;            return 204;        }        add_header 'Access-Control-Allow-Origin' '*';        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,X-Token';        try_files $uri $uri/ =404;    }}

3. 测试配置是否正确，并重新加载Nginx：

sudo nginx -tsudo systemctl reload nginx

验证CORS是否生效

你可以使用浏览器开发者工具（F12 → Network 标签）查看API请求的响应头，确认是否包含以下字段：

• Access-Control-Allow-Origin
• Access-Control-Allow-Methods
• Access-Control-Allow-Headers

如果看到这些字段，说明你的Ubuntu跨域资源共享配置已成功！

总结

通过本文，你已经学会了如何在Ubuntu系统上为Apache和Nginx服务器配置CORS。无论你是前端开发者还是运维人员，掌握这些基础配置都能显著提升开发效率。记住，在生产环境中务必限制 Access-Control-Allow-Origin 的值，避免安全风险。

希望这篇关于Ubuntu跨域资源共享配置的教程对你有帮助！如果你还有其他问题，欢迎在评论区留言交流。