neobooru / SzuruChrome

Chrome/Firefox extension which can import media from various sites into a szurubooru instance.
MIT License
42 stars 5 forks source link

Couldn't connect to http://raspiserver:800 - TypeError: e.response is undefined #12

Closed phil-flip closed 3 years ago

phil-flip commented 3 years ago

I was unable to add my szuru server as i receive CORS errors in Firefox.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://raspiserver:800/api/info. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://raspiserver:800/api/info. (Reason: CORS request did not succeed).

phil-flip commented 3 years ago

ok.. my bad. rtfm

phil-flip commented 3 years ago

So I have been on this for quite a while now, but I simply can't get it to work. Might be my missing knowledge about web servers in general and the missing information in the FAQ. So I first tried using a nginx reverse-proxy, which partially worked, but the GET request still got blocked. Then I researched a little and found out, that the configuration in the FAQ belongs to a .htaccess file? But where do I need to put that on my szurubooru installation. Or is that a browser thing I need to do?

neobooru commented 3 years ago

The configuration in the FAQ is for an Apache2 server. I haven't yet added a section for nginx.

Are you manually configuring nginx, or are you using the official docker image? I didn't really test the docker image myself, so maybe there still is a bug with it.

Official docker nginx config My customized config (not for docker)

The important part is the following snippet. Ideally you want this somewhere under location /api/ (or a slight differentiation of that), but you can put it under the server {...} too (I think).

# If pre-flight request
if ($request_method = "OPTIONS") {
    add_header "Access-Control-Allow-Origin" "*";
    add_header "Access-Control-Allow-Methods" "GET, POST, PUT, DELETE, OPTIONS";
    add_header "Access-Control-Allow-Headers" "Authorization, Content-Type";

    add_header "Access-Control-Max-Age" 1728000;
    return 204;
}

# For all other requests
add_header "Access-Control-Allow-Origin" "*";
add_header "Access-Control-Allow-Methods" "GET, POST, PUT, DELETE, OPTIONS";
add_header "Access-Control-Allow-Headers" "Authorization, Content-Type";

Please report back on what fixed your issue, or if this didn't fix it 👍

P.s. if you are still having problems then please include your nginx config file.

phil-flip commented 3 years ago

Alright, we did it. After I looked 3 Times on the same error message I noticed, that it's not allowed to have multiple Access-Control-Allow-Origins. .-. So I just commented the second Access-Control-Allow-Origin out and... it worked! Thank you a bunch!

Here are the config files I used. I can also send you the complete docker-compose file. Please note, that I am using a RPI. nginx config docker-compose