andrewnguonly / Lumos

A RAG LLM co-pilot for browsing the web, powered by local LLMs
MIT License
1.39k stars 103 forks source link

Blocked API Access due to CORS Policy - Disable CORS Checking for Specific Request. #57

Closed nausher closed 9 months ago

nausher commented 9 months ago

When I try to use the extension, I receive the following error. I have Ollama running locally and can query it from Emacs and receive responses.

Access to fetch at 'http://127.0.0.1:11434/api/embeddings' from origin 'chrome-extension://asfdasfasdfs' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I fed this to Llama and it suggested the following fixes. However I don't know see where in background.ts the fetch call is for me to add a no-cors mode.

The error message you encountered is related to the Cross-Origin Resource Sharing (CORS) policy in web browsers. The browser is blocking access to the ~http://127.0.0.1:11434/api/embeddings~ URL from originating from a different domain than the one that served the HTML document.

The error message specifically states that there is no ~Access-Control-Allow-Origin~ header present in the response to the preflight request (which is a request made by the browser to check if the server supports CORS). As a result, the browser is blocking the request from proceeding.

To fix this issue, you have two options:

  1. Add the ~Access-Control-Allow-Origin~ header to the server response. This can be done by adding the following line to the server-side code that handles the API request:

    +BEGIN_SRC php

    header('Access-Control-Allow-Origin: *');

    +END_SRC

    This will allow the browser to make requests to the API from any origin.

  2. Disable CORS checking for the specific API request by setting the ~mode~ parameter to ~'no-cors'~ in the fetch() function. This can be done like this:

    +BEGIN_SRC javascript

    fetch('http://127.0.0.1:11434/api/embeddings', { mode: 'no-cors' })

    +END_SRC

    This will disable CORS checking for the specific API request, allowing it to proceed even though there is no ~Access-Control-Allow-Origin~ header present in the response.

Note that disabling CORS checking can be a security risk, as it allows requests from any origin to access the API. You should only use this option when you have verified that the API is being accessed from a trusted source.

andrewnguonly commented 9 months ago

@nausher, did you set the OLLAMA_ORIGINS environment variable for the server? Example command to start the server:

OLLAMA_ORIGINS=chrome-extension://* ollama serve

If OLLAMA_ORIGINS is not set to chrome-extension://*, the Chrome extension will be blocked from calling the API (i.e. CORS error).

nausher commented 9 months ago

@andrewnguonly - Yes! setting the variable and starting the server resolves that issue. I also realize now that it is working, that the API call to the ollama server does take quite a long while and the extension pop-up window closes at times before it has received the response. Perhaps that is a different issue now.

Also for others looking at this issue. I had installed and run Ollama as a Mac App. I had to stop the app and run the app from the command line as a server to be able to use the variable for origins.

andrewnguonly commented 9 months ago

@nausher

the API call to the ollama server does take quite a long while and the extension pop-up window closes at times before it has received the response. Perhaps that is a different issue now

Working to resolve both issues 👍

  1. https://github.com/andrewnguonly/Lumos/issues/53
  2. https://github.com/andrewnguonly/Lumos/issues/50