CORS & browser integration

// What happens if you call us directly from the browser:
fetch("https://khaleejiapi.dev/api/v1/iban/AE070331234567890123456", {
  headers: { "x-api-key": "kh_live_..." } // BAD: key is in your bundle
})
// Browser console:
//   Access to fetch at 'https://khaleejiapi.dev/api/v1/iban/...' from origin
//   'https://your-app.com' has been blocked by CORS policy: No
//   'Access-Control-Allow-Origin' header is present on the requested resource.
 

// app/api/khaleeji/[...path]/route.ts (Next.js App Router)
import { NextRequest, NextResponse } from "next/server"
 
export const runtime = "nodejs" // Edge runtime works too if you don't need Node APIs
 
const UPSTREAM = "https://khaleejiapi.dev/api"
const KHALEEJI_API_KEY = process.env.KHALEEJI_API_KEY!
 
async function proxy(req: NextRequest, ctx: { params: Promise<{ path: string[] }> }) {
  const { path } = await ctx.params
  const url = new URL(`${UPSTREAM}/${path.join("/")}`)
  url.search = req.nextUrl.search
 
  // Forward only the methods + headers your app actually needs.
  const upstream = await fetch(url, {
    method: req.method,
    headers: {
      "x-api-key": KHALEEJI_API_KEY,
      "content-type": req.headers.get("content-type") ?? "application/json",
      // Optional: forward end-user IP for accurate rate-limit attribution
      "x-forwarded-for": req.headers.get("x-forwarded-for") ?? "",
    },
    body: ["GET", "HEAD"].includes(req.method) ? undefined : await req.text(),
  })
 
  // Pass through the upstream JSON so the browser can show error codes verbatim.
  const body = await upstream.text()
  return new NextResponse(body, {
    status: upstream.status,
    headers: {
      "content-type": upstream.headers.get("content-type") ?? "application/json",
      // CORS is handled by your own origin now - the upstream call is server-to-server.
    },
  })
}
 
export const GET = proxy
export const POST = proxy
export const PUT = proxy
export const DELETE = proxy
 

// app/components/iban-check.tsx (browser code)
"use client"
import { useState } from "react"
 
export function IbanCheck() {
  const [result, setResult] = useState<unknown>(null)
 
  async function check(iban: string) {
    // We hit OUR origin, not khaleejiapi.dev directly.
    // The proxy above injects the API key on the server.
    const res = await fetch(`/api/khaleeji/v1/iban/${iban}`)
    setResult(await res.json())
  }
 
  return (
    <button onClick={() => check("AE070331234567890123456")}>
      Validate IBAN
    </button>
  )
}
 

// server.js (Express / Node.js)
import express from "express"
import { createProxyMiddleware } from "http-proxy-middleware"
 
const app = express()
const KHALEEJI_API_KEY = process.env.KHALEEJI_API_KEY
 
app.use(
  "/api/khaleeji",
  createProxyMiddleware({
    target: "https://khaleejiapi.dev",
    changeOrigin: true,
    pathRewrite: { "^/api/khaleeji": "/api" },
    onProxyReq: (proxyReq) => {
      proxyReq.setHeader("x-api-key", KHALEEJI_API_KEY)
    },
  }),
)
 
app.listen(3000)
 

# config/routes.rb + app/controllers/khaleeji_proxy_controller.rb (Rails)
require "net/http"
 
class KhaleejiProxyController < ApplicationController
  UPSTREAM = URI("https://khaleejiapi.dev")
 
  def proxy
    upstream_path = "/api/" + params[:path]
    uri = UPSTREAM.dup
    uri.path = upstream_path
    uri.query = request.query_string.presence
 
    req = Net::HTTP.const_get(request.method.capitalize).new(uri)
    req["x-api-key"] = ENV.fetch("KHALEEJI_API_KEY")
    req["content-type"] = request.content_type if request.content_type
    req.body = request.raw_post if %w[POST PUT PATCH].include?(request.method)
 
    Net::HTTP.start(uri.host, uri.port, use_ssl: true) do |http|
      res = http.request(req)
      render plain: res.body, status: res.code, content_type: res.content_type
    end
  end
end