一、问题描述
使用 Vue3 + TypeScript + Vite 开发一个前端项目。当启动项目后，Vite 提供了两个访问地址，如：
Network: http://119.110.50.22:3001
Local: http://localhost:3001/
此时，如果通过 Local 地址访问页面正常，但通过 Network 地址访问页面报错，比如错误响应：
{
"code": 8500,
"message": "非法访问来源"
}
这是因为后端服务在校验请求的 Referer 或 Origin 头时发现它们不符合预期值（如只允许来自 localhost 的请求），从而拒绝了该请求。
二、解决方案
方法一：在 Vite 配置中伪造请求头 （亲测有效）
可以通过 Vite 的代理配置，在转发请求前手动设置请求头中的 Host、Origin 和 Referer 字段，使其符合后端期望的格式。
// vite.config.ts
import { defineConfig } from 'vite'
export default defineConfig({
server: {
proxy: {
'/api': {
target: 'http://backend.test.server', // 替换为你的测试服务地址
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
headers: {
// Host: 'localhost:3001', (根据实际情况选择是否添加）
Origin: 'http://localhost:3001',
Referer: 'http://localhost:3001'
}
}
}
}
})
上述配置确保所有发送给 /api 路径下的请求都将被代理到指定的后端服务器，并且这些请求都会携带特定的请求头，让后端误以为请求是来自 localhost，从而绕过后端的安全检查。
方法二：调整后端安全策略
如果可以与后端团队沟通，建议他们放宽对 Referer 和 Origin 的严格限制，尤其是在开发环境中。这可能包括：
允许更多的来源地址；
在开发模式下完全关闭此类校验；
使用更灵活的安全策略来适应不同环境的需求。
方法三：利用 hosts 文件绑定统一域名
为了更好地模拟生产环境的行为，可以在本地的 hosts 文件中添加一条记录，将某个域名指向你的开发服务器 IP 地址。例如：
119.110.50.22 dev.myapp.com
然后在浏览器中访问 http://dev.myapp.com:3001 并确保后端接受这个域名作为合法来源。
三、总结
针对后端对接口请求进行严格的来源校验时，前端需要根据具体情况采取相应的措施来避免“非法访问来源”的错误：
1、在前端配置中伪造请求头：适用于无法立即修改后端逻辑的情况。
2、调整后端的安全策略：从根本上解决问题，但可能需要协调开发团队的工作流程。
3、利用 hosts 文件绑定统一域名：有助于创建更加真实的测试环境，便于调试复杂的跨域问题。
选择哪种方案取决于项目的具体需求以及前后端协作的方式。
