开启Rewrite引擎（Apache需要先启用mod_rewrite模块，虚拟主机一般默认开启）

2026年08月03日云主机1150

摘要：### 虚拟主机用.htaccess轻松搞定跨域：从原理到实操的全攻略你有没有遇到过这样的场景？本地调试前端页面时一切正常，部署到虚拟主机后，却突然弹出“Access-Control-Allow-Origin”相关的错误——请求被浏览器拦截了。这就是…

虚拟主机用.htaccess轻松搞定跨域：从原理到实操的全攻略

你有没有遇到过这样的场景？本地调试前端页面时一切正常，部署到虚拟主机后，却突然弹出“Access-Control-Allow-Origin”相关的错误——请求被浏览器拦截了。这就是跨域问题，前端开发者绕不开的“小麻烦”，但用虚拟主机自带的.htaccess文件，就能轻松解决。

一、先搞懂：什么是跨域？为什么会被拦截？

跨域的本质是浏览器的同源策略限制。所谓“同源”，指的是两个页面的协议、域名、端口完全一致。比如：

http://a.com 访问 https://a.com（协议不同）
http://a.com 访问 http://b.com（域名不同）
http://a.com:80 访问 http://a.com:8080（端口不同）

这些情况都会触发跨域。浏览器之所以拦截，是为了防止恶意网站窃取用户数据（比如你在银行网站的登录状态）。但实际开发中，前后端分离（前端在a.com，后端在b.com）是常态，跨域需求不可避免。

二、为什么选.htaccess解决跨域？

虚拟主机大多用Apache服务器（少数是Nginx，但.htaccess是Apache的“专属配置文件”）。相比后端代码（如PHP加响应头），.htaccess有3个优势：

无需改代码：前端、后端都不用动，只改配置文件；
全局生效：一次配置，所有页面/接口都能跨域；
灵活易改：虚拟主机一般支持直接编辑.htaccess，不用重启服务器。

三、.htaccess解决跨域的核心：CORS响应头

跨域的关键是让服务器返回CORS（跨域资源共享）响应头，告诉浏览器“这个请求是安全的，可以放行”。核心头有3个：

Access-Control-Allow-Origin：允许哪些域名跨域（必填）；
Access-Control-Allow-Methods：允许哪些HTTP方法（如GET、POST、PUT）；
Access-Control-Allow-Headers：允许哪些自定义请求头（如Token）。

四、实操：3种常见场景的.htaccess配置

下面是虚拟主机上最常用的3种跨域配置，直接复制就能用——

场景1：允许所有域名跨域（测试环境用）

如果是个人测试或内部项目，不想限制域名，可以直接允许所有来源：

# 开启Rewrite引擎（Apache需要先启用mod_rewrite模块，虚拟主机一般默认开启）
RewriteEngine On

# 处理OPTIONS预请求（浏览器复杂请求前会发OPTIONS探测）
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]

# 设置CORS响应头
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
Header set Access-Control-Allow-Headers "Content-Type, Authorization, X-Requested-With"
Header set Access-Control-Allow-Credentials "true"

⚠️ 注意：*不能和Access-Control-Allow-Credentials "true"同时用？不，这里可以——因为*允许所有域名，而Credentials是允许带Cookie，只要浏览器端也设置了withCredentials: true就行。但生产环境不建议用*，太不安全。

场景2：允许指定域名跨域（生产环境用）

生产环境必须限制来源，比如只允许https://your-frontend.com跨域：

RewriteEngine On

# 处理OPTIONS预请求
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]

# 只允许指定域名
Header set Access-Control-Allow-Origin "https://your-frontend.com"
Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
Header set Access-Control-Allow-Headers "Content-Type, Authorization"
Header set Access-Control-Allow-Credentials "true"

如果需要允许多个域名，比如https://a.com和https://b.com，可以用RewriteCond动态判断：

RewriteEngine On

# 处理OPTIONS预请求
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]

# 动态设置允许的域名
SetEnvIf Origin "https://a.com|https://b.com" AccessControlAllowOrigin=$0
Header set Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
Header set Access-Control-Allow-Headers "Content-Type, Authorization"
Header set Access-Control-Allow-Credentials "true"

原理：用SetEnvIf匹配请求头里的Origin，如果是允许的域名，就把它存到变量AccessControlAllowOrigin里，再通过Header set返回给浏览器。

场景3：只允许特定目录跨域（比如接口目录）

如果只想让/API目录下的接口允许跨域，其他页面不允许，可以加路径限制：

RewriteEngine On

# 只对/api目录生效
<Directory "/var/www/HTML/api">
    # 处理OPTIONS预请求
    RewriteCond %{REQUEST_METHOD} OPTIONS
    RewriteRule ^(.*)$ $1 [R=200,L]

    # 设置CORS头
    Header set Access-Control-Allow-Origin "https://your-frontend.com"
    Header set Access-Control-Allow-Methods "GET, POST, OPTIONS"
    Header set Access-Control-Allow-Headers "Content-Type"
</Directory>

⚠️ 注意：/var/www/html/api是虚拟主机上的绝对路径，不同主机可能不同（比如有的是/public_html/api），需要根据实际情况修改。

五、避坑指南：这些错误别踩！

Apache没启用mod_rewrite：
如果配置后没效果，先检查虚拟主机是否开启了mod_rewrite。可以新建一个phpinfo.php文件，内容是<?php phpinfo(); ?>，访问后搜索“mod_rewrite”——如果有，说明已开启；没有的话，联系主机商开启。
.htaccess文件位置错了：
.htaccess必须放在网站根目录（比如public_html或www），如果放在子目录，只对该子目录生效。
OPTIONS请求被拦截：
浏览器发送“复杂请求”（比如带自定义头、PUT/DELETE方法）前，会先发送OPTIONS预请求，检查服务器是否允许跨域。如果服务器没有正确响应OPTIONS，就会报错。所以配置里一定要加RewriteCond %{REQUEST_METHOD} OPTIONS那两行。
缓存问题：
浏览器会缓存CORS响应头，如果你修改了.htaccess但没生效，试试清除浏览器缓存，或用Ctrl+F5强制刷新。