Add CORS plug limited to the specific path

It is not entirely clear why the plug does not work in a pipeline, but it does not. Likely this is related to how the macro for liveviews works

Author: Baradoy

lib/shopify_app/plugs/cors.ex

@@ -0,0 +1,16 @@
+defmodule ShopifyApp.Plug.CORS do
+  @moduledoc """
+  Allows CORS for the specific path.
+
+  # Example
+
+    plug ShopifyApp.Plug.CORS, path: "shop_admin"
+  """
+
+  @cors CORSPlug.init(origin: ["*"])
+
+  def init(opts), do: Keyword.fetch!(opts, :path)
+
+  def call(%Plug.Conn{path_info: [path | _]} = conn, path), do: CORSPlug.call(conn, @cors)
+  def call(conn, _opts), do: conn
+end

lib/shopify_app_web/endpoint.ex

@@ -18,6 +18,9 @@ defmodule ShopifyAppWeb.Endpoint do
   # The session info will be populated AssignScope and store in the DOM on `data-phx-session`
   socket "/shop_admin_live", Phoenix.LiveView.Socket, websocket: [connect_info: []]
 
+  # Add CORS specifically for the "/shop_admin" route for embeding LiveView in react.
+  plug ShopifyApp.Plug.CORS, path: "shop_admin"
+
   # Serve at "/" the static files from "priv/static" directory.
   #
   # You should set gzip to true if you are running phx.digest

lib/shopify_app_web/router.ex

@@ -21,7 +21,6 @@ defmodule ShopifyAppWeb.Router do
 
   pipeline :embeded_shop_admin do
     plug :accepts, ["html"]
-    plug CORSPlug, origin: ["*"]
     plug ShopifyAPI.Plugs.AuthShopSessionToken
     plug ShopifyAPI.Plugs.PutShopifyContentHeaders
   end