Secret Mixter + Listening Party
skip
Home » Forums » Bugs » Playlist and Stems pages need love from a Node or React dev

Playlist and Stems pages need love from a Node or React dev

mwic
admin
.
permalink   Thu, Mar 16, 2023 @ 10:03 AM
You can see a that a couple pretty-important sections of the relaunched site are still not working.
If anyone has experience troubleshooting or building reactJS apps, satellites, etc. please chime in here with contact info, as I don’t have much knowledge of these platforms.
-mwic
Mr. Pepino
.
permalink   Mon, Apr 3, 2023 @ 1:32 PM
Hi mwic,
I did some tests with the beta page and tried the login which failed on this page:
https://beta.ccmixter.org

When I open the console in the browser I get following error message:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://ccmixter.org/api/user/current. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match †http://dig.ccmixter.org’).

This usually means that your webserver has a configuration problem.
The CORS system is there to protect the webpage, so i can not load data from any other site on the net, when its not allowed by CORS.
When I look at the server response of a beta page, it sends the header:
Access-Control-Allow-Origin http://dig.ccmixter.org
The error is the wrong subdomain “dig”. It should be “beta”!

I did a test with the free Firefox addon “Allow CORS: Access-Control-Allow-Origin” and with the right settings
the beta page works fine. This addon can manipulte CORS settings for testing.

So a solution could be, if you change the configuration of the webserver which hosts the beta.ccmixter.org page.
If it is a apache webserver, here is a page with instructions on how to add Access-Control-Allow-Origin headers
https://ubiq.co/tech-blog/set-access-control-allow-origin-cors-headers-apache/

You have to add the additional header
Access-Control-Allow-Origin beta.ccmixter.org

Hope, that helps! Has been a longer time since I logged in. I did not notice the problems.
kind regards
David

UPDATE:
Found a page descirbing how to add CORS header for node.js:
https://www.section.io/engineering-education/how-to-use-cors-in-nodejs-with-express/
 
.
permalink   mwic Tue, Apr 4, 2023 @ 8:03 AM
Thanks for the look. About 75% of the problems the node apps have had so far have been fixed by CORS/ACAO header modifications, so you’re definitely in the ballpark.

When you go to
http://beta.ccmixter.org/forum
You get the correct ACAO headers from the API. If you click through from there to
http://beta.ccmixter.org/stems
.. you also still get the headers, and the app works.
But for some reason, just entering http://beta.ccmixter.org/stems into the address bar gives a “Not found”.
 
.
permalink   Mr. Pepino Tue, Apr 4, 2023 @ 8:56 AM
Yes I found it strange also, but you must think of the beta page like a big single-page app.
When you click on “pells”, then a virtual tab inside the page itself gets opened
and the logic of react just manipulates the address bar in the browser.
So on the server there exists no “/pells” page.
But I think, a forum page has to exist somehow.
A good startpage for mebers would be the direct link to:
https://beta.ccmixter.org/login
I have to dig deeper into react. I find this kind of frontend libs for browsers quite confusing.
I like pure javascript.
 
.
permalink   mwic Tue, Apr 4, 2023 @ 8:06 AM
NB: it only works with http:// , not https://

EDIT: That is, it didn’t work with https until 5 minutes ago, when I put an additional conditional ACAO header in there.

Still gives not-found when entering address directly.. so weird.