Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Allow Cross-Origin Resource Sharing (CORS) #1008

Merged
merged 1 commit into from
Jun 22, 2023
Merged

Allow Cross-Origin Resource Sharing (CORS) #1008

merged 1 commit into from
Jun 22, 2023

Conversation

cosmic-snow
Copy link
Collaborator

@cosmic-snow cosmic-snow commented Jun 17, 2023 •
edited
Loading

Describe your changes

Add the Access-Control-Allow-Origin header to the chat GUI's web API to enable CORS.

Issue ticket number and link

It was mentioned in #941 "Introduce a button in the UI Settings to enable CORS for the Web Server Mode of GPT4ALL UI."

Checklist before requesting a review

  • I have performed a self-review of my code.
  • If it is a core feature, I have added thorough tests.
  • I have added thorough documentation for my code.
  • I have tagged PR with relevant project labels. I acknowledge that a PR without labels may be dismissed.
  • If this PR addresses a bug, I have provided both a screenshot/video of the original bug and the working solution.

Demo

Using the following example HTML document:

<html><head><title>CORS test</title></head>
<body>
    <script type="text/javascript">
        function foo() {
            console.log("start click handler");
            function xhrHandler(e) {
                console.log("handled.")
                console.log(e);
            };
            var xhr = new XMLHttpRequest();
            xhr.addEventListener("load", xhrHandler);
            xhr.open("GET", "http://localhost:4891/v1/models");
            xhr.send();
            console.log("end click handler");
        }
    </script>
    <input type="button" onclick="foo()" value="click me!"></input>
</body>
</html>

Without the CORS header:

image

With the CORS header:

image

Steps to Reproduce

  • Use the example HTML
  • Start the web server in the chat GUI
  • The request is not allowed without a CORS header

Notes

C++ is not my strength, but I followed the example in the docs and it seemed straight-forward.
Please have a close look, though.

The linked issue requests a button to add to the UI. I simply enabled the header for everyone. I could make the PR more sophisticated, if necessary/desired.

@cosmic-snow cosmic-snow marked this pull request as ready for review June 17, 2023 11:34
@cosmic-snow
Copy link
Collaborator Author

Some more information might be appropriate:

  • CORS is more of a client/browser protection mechanism and:
    • The server generally doesn't produce any JavaScript which could be loaded into a page.
    • The server is restricted to localhost anyway, so this just prevents one from creating a local web UI based on it.

The implementation is mostly just taken from the Qt QHttpServer::afterRequest examples (although these seem to be missing a few parentheses), e.g.:

server.afterRequest([] (QHttpServerResponse &&resp) { return std::move(resp); }

@apage43 apage43 merged commit a423075 into nomic-ai:main Jun 22, 2023
1 check passed
@cosmic-snow cosmic-snow deleted the webapi-allow-cors branch June 22, 2023 23:56
@zwilch
Copy link

zwilch commented Apr 4, 2024

What is the secret to access the localhost:4891 API Point within a Browser Extension or with Javascript
I still have this CORS problem:
#2181 (comment)

@cosmic-snow cosmic-snow mentioned this pull request Apr 5, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@niansa niansa niansa approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
4 participants
@cosmic-snow @zwilch @niansa @apage43