本地文件跨域访问

本文介绍在使用Vue进行本地开发时遇到的跨域问题及其解决方案,包括修改Chrome配置和使用sublimeServer插件将本地文件作为服务端文件。

在本地做vue开发的过程中,通过vue-resource来做数据交互,粘上代码先看看吧

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-resource/1.3.1/vue-resource.min.js"></script>
    <script>
    window.onload = function () {
        new Vue({
            el: '#app',
            data: {
                msg: 'Vue'
            },
            created() {
                // console.log(this.$http)
                this.$http.get('./data.txt').then(function (response) {
                    console.log(response.data);
                })
            }
        })
    }
    </script>
    <div id="app">
        {{msg}}
    </div>

请求当前目录下的data.txt文件,但是chrome会抱一个错误
这里写图片描述

原因是因为:浏览器为了安全性考虑,默认对跨域访问禁止

两种做法:

一:修改chrome的配置,允许本地文件跨域

修改方法:
方案一:
Google Chrome应用程序目标位置中添加 chrome.exe –allow-file-access-from-files ! 注意中间空格(chrome.exe –allow-file-access-from-files)
这里写图片描述
注意!!! 必须重新启动电脑,否则无效……若方案一还无效,继续执行方案二
方案二: 使用cmd命令 传入浏览器启动参数 –allow-file-access-from-files
这里写图片描述
如果打开后还报错就重启电脑试试

二:将本地文件转换成服务端的文件

(我是讲sublime配置 了一个sublimeServer插件来使用的)
配饰sublimeServer来实现将本地.html文件已服务的形式打开,就不会报这个错了,具体安装sublimeServer的方法可以 参考这里

### 问题重述 你希望在 **Qt 应用中加载本地 HTML 文件时访问远程接口(如 `http://localhost:8000`)**,但由于浏览器的同源策略限制,导致出现错误(如 `TypeError: Failed to fetch`)。你想知道如何在 Qt 中启用对本地文件访问外部资源的权限。 --- ### 详解 在 Qt 中,如果你使用的是 **QWebEngineView** 或 **QWebEnginePage** 来加载本地 HTML 文件(如通过 `file:///` 协议),并且该页面尝试通过 JavaScript 发起请求到其他(如 `http://localhost:8000`),则会受到浏览器安全策略限制。 要解决这个问题,可以通过以下方式配置: #### ✅ 方法一:设置 WebEngine 配置以允许本地文件访问网络资源 你可以通过 `QWebEngineProfile` 和 `setPermissionGrantedByFeature` 设置权限: ```cpp #include <QWebEngineProfile> #include <QWebEnginePage> // 创建你的 QWebEngineView 实例 QWebEngineView *view = new QWebEngineView(this); // 获取默认的 profile 并设置权限 QWebEngineProfile *profile = QWebEngineProfile::defaultProfile(); profile->setHttpAcceptLanguage("zh-CN"); profile->setHttpUserAgent("MyApp"); // 允许本地文件访问网络资源(请求) profile->setPermissionGrantedByFeature(QWebEnginePage::Permissions::LocalContentCanAccessRemoteUrls, true); // 可选:允许访问本地文件系统资源(谨慎开启) profile->setPermissionGrantedByFeature(QWebEnginePage::Permissions::LocalContentCanAccessFileUrls, true); // 加载本地 HTML 文件 view->setUrl(QUrl::fromLocalFile("/path/to/your/file.html")); ``` > ⚠️ 注意:某些 Qt 版本中 `LocalContentCanAccessRemoteUrls` 已改为 `QWebEnginePage::LocalContentCanAccessRemoteUrls`,请根据 IDE 自动补全提示选择合适枚举。 #### ✅ 方法二:在 HTML 中通过 iframe 嵌套远程内容(替代方案) 如果你不想修改 Qt 端的权限设置,也可以将图表逻辑移至远程服务器,或通过 `<iframe>` 方式嵌入一个远程网页,这样就不存在“本地文件”与“远程资源”的问题。 例如: ```html <iframe src="http://localhost:8001/chart.html" width="100%" height="500"></iframe> ``` 其中 `chart.html` 托管在一个 HTTP 服务中。 #### ✅ 方法三:启动 Qt 时添加命令行参数(临时测试) 你也可以在启动 Qt 应用时通过命令行参数禁用部分安全限制(仅用于调试): ```bash --disable-web-security --allow-file-access-from-files ``` 但这种方式存在安全隐患,不建议用于生产环境。 --- ### 知识点 1. **QWebEngineProfile 权限管理** > 控制 Qt Web 页面行为的关键类,可设置是否允许本地文件访问远程资源。 2. **浏览器同源策略(Same-Origin Policy)** > 浏览器为防止站攻击而实施的安全机制,Qt 的 WebEngine 组件也遵循此规则。 3. **Qt WebEngine 调试与命令行参数** > 支持通过命令行参数控制底层 Chromium 行为,用于调试和临时绕过安全限制。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值