{"id":5240,"date":"2025-04-10T10:33:10","date_gmt":"2025-04-10T14:33:10","guid":{"rendered":"https:\/\/ikriv.com\/blog\/?p=5240"},"modified":"2025-04-10T10:36:15","modified_gmt":"2025-04-10T14:36:15","slug":"cors-proxies-and-the-trailing-slash-issue","status":"publish","type":"post","link":"https:\/\/ikriv.com\/blog\/?p=5240","title":{"rendered":"CORS, proxies, and the trailing slash issue"},"content":{"rendered":"

TL;DR<\/b> On the client side, use trailing slash when requesting the “default” resource from a Flask app.<\/p>\n

Server:<\/p>\n

\r\n# Python flask server at \/var\/www\/api\/myapp\r\napp = Flask(__name__)\r\n\r\n@app.route('\/')\r\ndef get_root_resource():\r\n    ...\r\n    return xyz\r\n<\/pre>\n
Client:<\/p>\n
\r\n\/\/ Javascript client\r\nconst response = await fetch("\/api\/myapp\/); \/\/ note the trailing slash\r\n<\/pre>\n
Why it matters<\/h2>\n
In Production<\/h3>\n
If you make a request without the trailing slash, e.g. https:\/\/myserver.com\/api\/myapp<\/code>, the server would redirect it 308 PERMANENT REDIRECT<\/code> to https:\/\/myserver.com\/api\/myapp\/<\/code>, with a trailing slash.<\/p>\n
In production settings, when both the client and the Flask app are served from the same domain, it is just a performance issue: there is an additional network round-trip for each API request. The sequence of events in production is:<\/p>\n
    \n
  1. Client makes request to https:\/\/myserver.com\/api\/maypp<\/code><\/li>\n
  2. Server responds with 308 PERMANENT REDIRECT<\/code> to https:\/\/myserver.com\/api\/maypp\/<\/code><\/li>\n
  3. Client makes request to https:\/\/myserver.com\/api\/maypp\/<\/code><\/li>\n
  4. Server responds with the data.<\/li>\n<\/ol>\n
    In Development<\/h3>\n
    In development settings omitting the final slash may cause CORS problems. My scenario was as follows.<\/p>\n
    The client is a React application. In debug mode, I serve it from the npm development server (npm start<\/code>) at http:\/\/localhost:3000\/<\/code>. If the client makes an explicit request to https:\/\/myserver.com\/api\/myapp<\/code>, it causes a CORS error, unless the API is configured to accept any origin (which it isn’t).<\/p>\n
    To avoid that, we setup a proxy in package.json<\/code> (documentation<\/a>), so the npm development server picks up requests to \/something<\/code>, and fetches data from https:\/\/myserver.com\/something<\/code> behind the scenes. This bypasses the CORS checker: as far as the browser is concerned, we never go out to myserver.com<\/code> and receive everything from localhost<\/code>.<\/p>\n
    \r\n{\r\n  "name": "myclient",\r\n  "version": "0.1.0",\r\n  "proxy": "https:\/\/myserver.com",\r\n  "private": true,\r\n  ...\r\n}\r\n<\/pre>\n
    The sequence of events then becomes:<\/p>\n
      \n
    1. Client makes request to \/api\/maypp<\/code>.<\/li>\n
    2. Local npm server forwards the request to https:\/\/myserver.com\/api\/maypp<\/code><\/li>\n
    3. Remote server responds with 308 PERMANENT REDIRECT<\/code> to https:\/\/myserver.com\/api\/maypp\/<\/code><\/li>\n
    4. Client makes request to https:\/\/myserver.com\/api\/maypp\/<\/code><\/li>\n
    5. This causes a CORS error in the browser, since the client is on localhost<\/code> and we are requesting data from a different domain.<\/li>\n<\/ol>\n
      If the client makes a request to \/api\/myapp\/<\/code> with trailing slash included, everything works as expected:<\/p>\n
        \n
      1. Client makes request to \/api\/maypp\/<\/code><\/li>\n
      2. Local npm server forwards the request to https:\/\/myserver.com\/api\/maypp\/<\/code><\/li>\n
      3. Remote server responds with the data, no redirect needed.<\/li>\n
      4. Client gets the data, no CORS errors.<\/li>\n<\/ol>\n
        So, that little trailing slash matters, don’t forget to include it.<\/p>\n","protected":false},"excerpt":{"rendered":"
        TL;DR On the client side, use trailing slash when requesting the “default” resource from a Flask app. Server: # Python flask server at \/var\/www\/api\/myapp app = Flask(__name__) @app.route('\/') def get_root_resource(): […]<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"Layout":"","footnotes":""},"categories":[15],"tags":[],"class_list":["entry","author-ikriv","post-5240","post","type-post","status-publish","format-standard","category-webdev"],"_links":{"self":[{"href":"https:\/\/ikriv.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/5240","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ikriv.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ikriv.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ikriv.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ikriv.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5240"}],"version-history":[{"count":8,"href":"https:\/\/ikriv.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/5240\/revisions"}],"predecessor-version":[{"id":5248,"href":"https:\/\/ikriv.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/5240\/revisions\/5248"}],"wp:attachment":[{"href":"https:\/\/ikriv.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5240"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ikriv.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5240"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ikriv.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5240"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}