1. 概述
瀏覽器直接載入本地網頁的時候，如果網頁涉及到載入本地資源（如圖片），會出現跨域的問題。Qt的Qt WebEngine模組基於Chromium專案，遇到這樣的情況也會出現跨域的問題。
2. 詳論
2.1. 傳參
理論上，我們可以像設定chrome瀏覽器跨域一樣（設定chrome瀏覽器跨域網上的資料非常多），給我們使用的Qt程式傳參：
char ARG_DISABLE_WEB_SECURITY[] = "--disable-web-security";
int newArgc = argc+1+1;
char** newArgv = new char*[newArgc];
for(int i=0; i<argc; i++) {
newArgv[i] = argv[i];
}
newArgv[argc] = ARG_DISABLE_WEB_SECURITY;
newArgv[argc+1] = nullptr;
QApplication myApplication(newArgc, newArgv);
Qt會將跨域引數傳遞到Qt WebEngine模組的Chromium核心中，從而實現跨域。
2.2. JS module
即使設定跨域，當使用JavaScript ES6 module的時候，仍然有可能會出現跨域的問題。
一個顯而易見的錯誤提示如下：
js: Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.
原因在於，在Chrome瀏覽器的某些版本中，ES6 module的功能不支援跨域（但是require.js卻可以）。現在最新版本的Chrome的跨域設定已經可以支援ES6 module，但是Qt WebEngine模組卻可能是比較低的Chromium版本，從而造成使用ES6 module遇到跨域問題。通常來說，越新的Qt版本，Chromium版本也會越高。
如果還是不想要伺服器環境，那麼一種解決方案就是自定義URL方案：
#include <QApplication>
#include <QWebEngineView>
#include <QWebEngineUrlScheme>
#include <QWebEngineProfile>
#include <QWebEngineUrlSchemeHandler>
#include <QWebEngineUrlRequestJob>
#include <QFile>
#include <QFile>
#include <QFileInfo>
#include <QMimeDatabase>
class QtSchemeHandler : public QWebEngineUrlSchemeHandler
{
public:
QtSchemeHandler(QObject *parent = nullptr):QWebEngineUrlSchemeHandler(parent)
{
}
void requestStarted(QWebEngineUrlRequestJob *request) override
{
QByteArray request_method = request->requestMethod();
if(request_method != "GET")
{
request->fail(QWebEngineUrlRequestJob::RequestDenied);
return;
}
QUrl request_url = request->requestUrl();
QString request_path = request_url.path();
//qDebug()<<request_url<<endl;
QString application_path = "D:/";
QFile *file = new QFile(application_path + request_path);
file->setParent(request);
connect(request, &QObject::destroyed, file, &QFile::deleteLater);
//qDebug()<<file->size()<<endl;
if(!file->exists()||file->size()==0)
{
printf("resource '{request_path}' not found or is empty");
request->fail(QWebEngineUrlRequestJob::UrlNotFound);
return;
}
QFileInfo file_info = QFileInfo(*file);
QMimeDatabase mime_database;
QMimeType mime_type = mime_database.mimeTypeForFile(file_info);
request->reply(QUrl(mime_type.name()).toEncoded(), file);
}
};
int main(int argc, char *argv[])
{
char ARG_DISABLE_WEB_SECURITY[] = "--disable-web-security";
int newArgc = argc+1+1;
char** newArgv = new char*[newArgc];
for(int i=0; i<argc; i++) {
newArgv[i] = argv[i];
}
newArgv[argc] = ARG_DISABLE_WEB_SECURITY;
newArgv[argc+1] = nullptr;
qputenv("QTWEBENGINE_REMOTE_DEBUGGING", "7542"); //用於除錯
QWebEngineUrlScheme scheme = QWebEngineUrlScheme("qt");
scheme.setFlags(QWebEngineUrlScheme::CorsEnabled);
QWebEngineUrlScheme::registerScheme(scheme);
//QApplication a(argc, argv);
QApplication a(newArgc, newArgv);
QWebEngineView view;
QtSchemeHandler *scheme_handler = new QtSchemeHandler();
view.page()->profile()->installUrlSchemeHandler("qt", scheme_handler);
view.page()->profile()->clearHttpCache(); //刪除快取
//view.load(QUrl("D:/cesium/CesiumWork/3DTilesPhotogrammetry/3DTilesPhotogrammetry.html"));
view.load(QUrl("qt://local/cesium/CesiumWork/3DTilesPhotogrammetry/3DTilesPhotogrammetry.html"));
view.show();
return a.exec();
}
這個方案的本質是將URL定義地址的資源給轉發了一遍。但是這種方案還是有侷限性，經過測試，在Qt5.15.2版本中可行，但在Qt5.12.5版本中不行。而且這樣所有的資源地址都得采用這一套URL方案。
3. 建議
其實個人還是不太建議再輕易嘗試使用本地網頁跨域了，畢竟這一點與Web的安全性背道而馳。最好還是讓網頁在伺服器環境下吧，出問題的可能性會小一點。