from origin 'http://localhost:30000' has been blocked by CORS policy

Pradson

Hello,

I have tried to communicate with example application "addressbookserver" and "addressbookclient". The examples links are mentioned below-

addressbookserver example link:
https://doc-snapshots.qt.io/qt6-dev/qthttpserver-addressbook-example.html

addressbookclient example link:
https://doc.qt.io/qt-6/qtdoc-demos-addressbook-example.html

I have build both example application using Qt6.4 and MSVC2019. Both are working fine on windows desktop. The client connects to the server using <localhost> and <port> after that I can perform task accordingly. The server serves the client accordingly.

But when I build and run the "addressbookclient" only using Qt For WebAssembly and Emscripten compiler, then the "addressbookclient" application is able to load on web browser but can not send request to the "addressbookserver" application, in- short I cant not perform task as I could perform in the desktop.

The browser is showing below mentioned errors and warnings-
Errors-

customeComponents.html:1 Access to XMLHttpRequest at 'http://127.0.0.1:8001/v2/contact/Meter_4410.Instantaneous.Current_R_Phase'; from origin 'http://localhost:30000'; has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

VM413:9     GET http://127.0.0.1:8001/v2/contact/Meter_4410.Instantaneous.Current_R_Phase net::ERR_FAILED

Warnings-

qtloader.js:370 Reply Error Code: QNetworkReply::ProtocolUnknownError
self.moduleConfig.printErr @ qtloader.js:370

I have added the headers at both end server as well as client accordingly but still facing communication problem.

At Server end-

QHttpServerResponse resp(array);
                            resp.setHeader("Access-Control-Allow-Origin", "*");
                            return resp;

At client end-

auto request = QNetworkRequest(QUrl(QString("%1:%2/v2/contact/%3").arg(host).arg(port).arg(tagName)));
request.setRawHeader("Access-Control-Allow-Origin", "*");
request.setHeader(QNetworkRequest::KnownHeaders::ContentTypeHeader, "application/json");
 manager.get(request);

Kindly suggest the solution with reference to the above examples so that I could perform same actions (As desktop application has) through web browser.

Thanks & Regards,
Pradson

piervalli

@Pradson Check this link
https://stackoverflow.com/questions/32500073/request-header-field-access-control-allow-headers-is-not-allowed-by-itself-in-pr
The problem is common ,you can following those settings. (sorry for Node and not C++)
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
next();
});

Pradson

Hi,
Thanks a lot for reply.

Actually, I need help regarding above Qt examples.

Thanks,
Pradson

Pradson

Hi,

Can anybody guide me for regarding below mentioned error-

Access to XMLHttpRequest at 'http://127.0.0.1:8001/v2/contact/Meter_4410.Instantaneous.Current_R_Phase'; from origin 'http://localhost:30000'; has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

How shall I enable the "Access-Control-Allow-Origin" header at my QHttpSever module?

Kindly suggest.

Thanks,
Pradson

fokhagyma

@Pradson "How shall I enable the "Access-Control-Allow-Origin" header at my QHttpSever module?" E.g.:

QHttpServer httpServer;
httpServer.route("/", []() {
    QHttpServerResponse sr("Hello World!");
    QHttpHeaders&& hd = sr.headers();
    hd.append(QHttpHeaders::WellKnownHeader::AccessControlAllowOrigin, "http://localhost:30000");
    sr.setHeaders(std::move(hd));
    return sr;
});