I’ve been thinking (and writing) about CORS recently because there’s (as of this writing) a CORS error on the Bowdoin Orient’s site. The stylesheets for loading the Orient’s fonts are coming up with a CORS error in the Firefox console, while the Chrome console shows CORS errors for both the stylesheet and the font files.

I thought the solution would be fairly easy, but a quick diagnostic showed that it’s a little more complicated than originally expected. As I write this, I’m not sure what needs to be changed to fix the issue, but I’m going to try to outline my thought process while I debug it.

If I had any takeaways, they would have to be that debugging these kinds of issues (especially on systems you don’t know well) can be tricky, and it helps to have knowledge of the invariants of the system. In this case, I had done my background research on CORS errors so I knew what the ultimate solution would look like: there were response headers that weren’t showing up when I expected them to. I also knew that because some CURL queries responded with the correct CORS headers, there was a problem with some configuration between S3 and the browser: one of the layers working in there was stripping away the response headers I wanted. I was then able to examine each layer to narrow down where the problem lies, then read the documentation specific to that layer (thank goodness that documentation exists) to configure the CDN correctly.

This was an interesting case study since it’s in an unfamiliar area (HTTP responses and CDN configuration) of a very familiar field (web development). Most of the time when I come across these confusing types of issues I look through Stack Overflow and add the few lines of code that solves it. *This is a skill in itself: knowing which Stack Overflow solution fits the problem domain and understanding where the lines of code need to go. In those situations, I feel like SO is standing in for good documentation, in that I couldn’t figure out through documentation alone why an issue was taking place and what code I needed to write in order to solve it. This CORS issue had come up enough times that I decided that I wanted to have a greater understanding of what’s going on and what needed to be fixed.

I hope to write this kind of blog post again in the future. Deep-diving and solving these types of problems is an intrinsic part of software development, and I like having insight into the thought processes I go through in order to fix a bug. Hopefully if I do this again I can have points of reference for my problem-solving thought process to see how this skill changes over time.