Vibe coding can't be real
I explore the pitfalls of coding with Artificial Intelligence and the concept of "vibe coding" as a way of writing software.
Vibe coding is a myth. If somebody wants to do something of any intricacy, AI will steer you wrong. In this story, a CORS error brought me to the rabbit hole, but my confidence in AI made sure I stayed lost for hours. 🐇🙍♂️❓🐇 🕳️
The project is an integration with PeerTube. I'm developing an application that uses AI to transcribe videos and shoves that into a search database. I've got the backend components complete and all that's left is to surface the clipping and publishing to the UI. (My experience with front end is limited.)
Ask the AI 🙅♂️
Q: "CORS is failing"
🤖: "If you are still facing CORS issues, specifically with the OPTIONS requests failing, here are some additional steps you can take to troubleshoot and potentially resolve the problem:
1. Double-Check CORS Headers: Ensure that the CORS headers are being set correctly in the response for the OPTIONS requests. It's crucial that the preflight requests receive the necessary CORS headers to allow subsequent requests.
2. Handling Preflight Requests: For OPTIONS requests, verify that your server is responding properly with the CORS headers. The server should respond to the OPTIONS requests sent by the browser with the appropriate CORS headers.
3. Inspect Network Requests: Use the developer tools in your browser to inspect the OPTIONS request and response. Verify that the CORS headers are present in the OPTIONS response. Look for any CORS-related errors or warnings in the browser console.
4. Specific Origin Handling: If you need to allow requests only from specific origins, ensure that your CORS headers are configured to reflect this. Update the Access-Control-Allow-Origin header to list the specific origin(s) allowed.
5. CORS Middleware: Consider using a middleware specifically designed for handling CORS requests in your server-side application if direct configuration in Caddy is not enough. This might provide more flexibility in dealing with CORS issues.
6. Testing without Reverse Proxy: To isolate the issue, you can directly test the API endpoints bypassing Caddy. If the endpoints work correctly without Caddy in the middle, it might indicate a configuration issue with Caddy.
7. Update Browser or Perform Cross-Browser Tests: Occasionally, browsers might have strict CORS policies. Try testing in a different browser or updating your current browser to see if the CORS issue persists.\n\nBy following these steps and ensuring that your server correctly responds to OPTIONS requests with the necessary CORS headers, you should be able to resolve the OPTIONS failing issue related to CORS in your setup."
Q: "rewrite ember's findAll around cors"
🤖: <writes an empty overriding method>
"Ugh, time to roll up the sleeves"
None of what the AI suggested worked for me. I went around and around with changing the specifics and still got nowhere.
It was time to go back to the old-school way: hacking.
The rabbit hole 🐇🕳️
Search 🦆🦆 go 🙅♂️
"Ember proxy" 🙅♂️
"CORS emberjs" 🙅♂️
"Peertube CORS" 🙅♂️
"(Reason: CORS request did not succeed). Status code: (null) {peertube, ember}" 🙅♂️
Search the documentation for Ember 🙅♂️
Search the documentation for PeerTube 🙅♂️
Logs 🙅♂️
Logs don't even register the OPTION or the GET
Try another browser 🙅♂️
Doesn't work in Firefox, But Firefox has a shit ton of plugins.
Maybe it works in Chrome. 🙅♂️
Chrome did have better data to look at. Is it my browser? 🙅♂️
Maybe it's PeerTube
PeerTube uses peertube.localhost for accessing it's webpage without a proxy. It must be peertube.localhost or authentication will fail. 🙅♂️
Maybe it's EmberJS
Is it using ajax under the hood? let's break overwrite the method and inspect the guts. 🙅♂️
Maybe it's localhost 🙅♂️
CORS might have failed because peertube has an explicit trust proxy setting
PEERTUBE_TRUST_PROXY=["127.0.0.1", "loopback", "172.20.0.0/16"]
My request is coming from localhost, so maybe if I make the request from 127.0.0.1 it will work. 🙅♂️
Maybe if I append localhost to the trust proxy array it will work. 🙅♂️
Maybe if I run a proxy in docker between the request and the server it will resolve. 🙅♂️
Try the same request in POSTMAN 😮
It works perfectly. WTF 😠
Not only does OPTION work, but GET /videos returns videos!
CORS doesn't seem to be a problem for that client...
Reboot the computer 💀
Windows 10 has been my daily driver since January. I normally use a Mac but I need the GPU to run whisper. What I came to find out was that Windows stops working as expected after a while and a reboot is necessary to ensure proper functioning. 🙅♂️
Every turn I was leveraging AI to help and it gladly assisted. It wasn't capable of the real answer which was to take a step back.
The solution
The problem with CORS was that the OPTION request wasn't resolving because it was pointed to the wrong address. In the image above, the variable name is "host." I must have not thought to include the port (:9000). The error from the browser was misleading and asking AI about the error only perpetuated the problem.
I was hacking on this code in the early evening. It was around dinner time when I hit the CORS error. The red message in the console sunk my gumption. There are too many times where some security protocol stands in the way of progress. While I appreciate why it's there, I am no less flustered by the hurdles.
I literally responded to the ordeal by taking a two hour nap. Later, I got up, ate a dinner, then forced myself to deal with it. It was about 9:15pm when I found the mistake. The excitement to progress was overshadowed by the determination to document this moment.
In this example I was using ChatpadAI with OpenAI, but Copilot is equally as flawed. There was a session where Copilot changed a configuration from url to uri and I just didn't see it. I was learning C# and was leaning on AI heavily to grok the language.
I doubled down as Copiliot as a solution; when I ran into an error, I'd paste in the chat. What resulted was a merry-go-round of answers all of which were wrong and I had no way to evaluate the validity. Letting Copilot rewrite my code put my workflow into a tailspin.
Vibe coding is a farce. I'm not convinced people are making software this way because AI can really only do cookie-cutter software, albeit very well. It reminds me of my favorite quote about AI.
Would AI have introduced the same bug? Maybe, but maybe not. So that could mean that vibe coding is viable if it can correct it's own mistakes. But as I've experienced, AI is going to fail at the same hurdles as humans, don't be fooled into thinking it is the solution itself.