{"id":18961994,"url":"https://github.com/lamualfa/cors_id","last_synced_at":"2025-07-30T16:33:10.712Z","repository":{"id":39755499,"uuid":"483949462","full_name":"lamualfa/cors_id","owner":"lamualfa","description":"🔀 Panduan singkat mengatasi masalah CORS di berbagai macam aplikasi.","archived":false,"fork":false,"pushed_at":"2022-05-26T07:11:16.000Z","size":359,"stargazers_count":28,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-19T16:29:08.759Z","etag":null,"topics":["api","backend","brave","chrome","cors","edge","firefox","http","javasript","nodejs"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lamualfa.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-04-21T07:27:23.000Z","updated_at":"2025-04-16T09:18:17.000Z","dependencies_parsed_at":"2022-08-28T06:34:28.116Z","dependency_job_id":null,"html_url":"https://github.com/lamualfa/cors_id","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/lamualfa/cors_id","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lamualfa%2Fcors_id","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lamualfa%2Fcors_id/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lamualfa%2Fcors_id/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lamualfa%2Fcors_id/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lamualfa","download_url":"https://codeload.github.com/lamualfa/cors_id/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lamualfa%2Fcors_id/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267899103,"owners_count":24162984,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-30T02:00:09.044Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","backend","brave","chrome","cors","edge","firefox","http","javasript","nodejs"],"created_at":"2024-11-08T14:14:55.118Z","updated_at":"2025-07-30T16:33:10.668Z","avatar_url":"https://github.com/lamualfa.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Panduan singkat mengatasi CORS di berbagai macam aplikasi\n\n![CORS](./header.png)\n\nMayoritas [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) terjadi di browser dan disebabkan oleh _server/backend/api_ yang kamu gunakan di website tersebut. Untuk mengatasi nya, silahkan ikuti panduan singkat berikut.\n\n![hr](./hr.png)\n\n## FAQ\n\n- Saya menggunakan _server/backend/api_ eksternal? **[Gunakan cara cepat](#cara-cepat)**.\n- Saya tidak tahu teknologi apa yang _server/backend/api_ eksternal saya gunakan? **[Gunakan cara cepat](#cara-cepat)**.\n- Teknologi yang saya gunakan belum ada? **[Buat issue](https://github.com/lamualfa/cors_id/issues/new)** atau **[buat pull request](https://github.com/lamualfa/cors_id/pulls)** jika berkenan.\n\n![hr](./hr.png)\n\n## Cara membaca error CORS\n\n![image](./error.png)\n\nPada contoh diatas berarti server yang bermasalah adalah server dengan domain `http://localhost:5000`. Server dengan domain tersebut yang harus diperbaiki menggunakan solusi-solusi yang saya sediakan dibawah.\n\n![hr](./hr.png)\n\n## Informasi\n\nDomain `http://domain-website-kamu.com` adalah domain dari server frontend yang kamu gunakan. Bukan domain dari _server/backend/api_ yang bermasalah tadi.\n\n###### Development\n\nGanti `http://domain-website-kamu.com` dengan `http://localhost:[PORT_WEBSITE_KAMU]`.\n\n###### Production\n\nGanti `http://domain-website-kamu.com` dengan domain dari website kamu.\n\n![hr](./hr.png)\n\n## Pintasan\n\n###### Pilih berdasarkan teknologi yang _server/backend/api_ kamu gunakan.\n\n- [Node.js](#nodejs)\n  - [HTTP](#http)\n  - [Express](#express)\n  - [Fastify](#fastify)\n  - [Next.js](#nextjs-api)\n- [PHP](#php)\n  - [Laravel](#laravel)\n- [Go](#go)\n  - [net/http](#nethttp)\n  - [Gin](#gin)\n  - [Chi](#chi)\n  - [Fiber](#fiber)\n  - [Echo](#echo)\n- [Cara cepat](#cara-cepat)\n  - [Ekstensi browser](#ekstensi-browser)\n\n![hr](./hr.png)\n\n## Node.js\n\n### HTTP\n\n```js\nconst http = require(\"http\")\nconst port = 8080\n\nhttp\n  .createServer((req, res) =\u003e {\n    const headers = {\n      // Ganti domain ini\n      \"Access-Control-Allow-Origin\": \"http://domain-website-kamu.com\",\n      \"Access-Control-Allow-Methods\": \"OPTIONS, POST, GET\",\n      \"Access-Control-Max-Age\": 2592000,\n    }\n\n    if (req.method === \"OPTIONS\") {\n      res.writeHead(204, headers)\n      res.end()\n      return\n    }\n\n    // letakkan router kamu disini\n\n    res.writeHead(405, headers)\n    res.end(`${req.method} is not allowed for the request.`)\n  })\n  .listen(port)\n```\n\n### Express\n\nhttps://expressjs.com/en/resources/middleware/cors.html\n\n```js\nvar express = require(\"express\")\nvar cors = require(\"cors\")\nvar app = express()\n\nvar corsOptions = {\n  // Ganti domain ini\n  origin: \"http://domain-website-kamu.com\",\n}\n\napp.use(cors(corsOptions))\n\napp.listen(80)\n```\n\n### Fastify\n\nhttps://github.com/fastify/fastify-cors\n\n```js\nconst fastify = require(\"fastify\")()\n\nfastify.register(require(\"fastify-cors\"), {\n  // Ganti domain ini\n  origin: \"http://domain-website-kamu.com\",\n})\n```\n\n### Next.js API\n\nhttps://github.com/yonycalsin/nextjs-cors\n\n```js\nimport NextCors from \"nextjs-cors\"\n\nasync function handler(req, res) {\n  await NextCors(req, res, {\n    // Ganti domain ini\n    origin: \"http://domain-website-kamu.com\",\n    methods: [\"GET\", \"HEAD\", \"PUT\", \"PATCH\", \"POST\", \"DELETE\"],\n  })\n\n  //  letakkan kode anda disini\n}\n```\n\n![hr](./hr.png)\n\n## PHP\n\n### Laravel\n\n#### Versi 8, 7, 6 dan kebawah\n\nhttps://github.com/fruitcake/laravel-cors\n\n##### Install `laravel-cors`\n\n```bash\ncomposer require fruitcake/laravel-cors\n```\n\n##### Tambahkan middleware\n\nBuka file `app/Http/Kernel.php`, dan tambahkan middleware `\\Fruitcake\\Cors\\HandleCors::class` di bagian paling atas `$middleware`.\n\n###### contoh\n\n```php\nprotected $middleware = [\n  \\Fruitcake\\Cors\\HandleCors::class,\n    // ...\n];\n```\n\n##### Buat file konfigurasi\n\n```bash\nphp artisan vendor:publish --tag=\"cors\"\n```\n\n##### Konfigurasi CORS\n\nBuka file `config/cors.php` dan tambahkan konfigurasi berikut:\n\n```php\n'allowed_origins' =\u003e ['http://domain-website-kamu.com']\n```\n\n![hr](./hr.png)\n\n\n## Go\n\n### net/http\n\n#### Tanpa third-party package\n\n```go\nfunc CORS(next http.HandlerFunc) http.HandlerFunc {\n  return func(w http.ResponseWriter, r *http.Request) {\n    w.Header().Add(\"Access-Control-Allow-Origin\", \"http://domain-website-kamu.com\")\n    w.Header().Add(\"Access-Control-Allow-Credentials\", \"true\")\n    w.Header().Add(\"Access-Control-Allow-Methods\", \"POST, GET, OPTIONS, PUT, DELETE\")\n\n    if r.Method == \"OPTIONS\" {\n        http.Error(w, \"No Content\", http.StatusNoContent)\n        return\n    }\n\n    next(w, r)\n  }\n}\n\nfunc main() {\n  router := http.NewServeMux()\n\n  // Pasang routing kamu disini\n\n  http.ListenAndServe(\":8080\", CORS(router))\n}\n```\n\n#### Dengan third-party package\n\nMenggunakan [rs/cors](https://github.com/rs/cors)\n\n```go\npackage main\n\nimport (\n    \"net/http\"\n\n    \"github.com/rs/cors\"\n)\n\nfunc main() {\n    router := http.NewServeMux()\n    // Pasang routing kamu disini\n\n    corsMiddleware := cors.New(cors.Options{\n        AllowedOrigins: []string{\"http://domain-website-kamu.com\"},\n        AllowCredentials: true,\n        AllowedMethods: []string{\"GET\", \"POST\", \"OPTIONS\", \"PUT\", \"DELETE\"},\n        // Enable Debugging for testing, consider disabling in production\n        Debug: true,\n    })\n\n    http.ListenAndServe(\":8080\", corsMiddleware(router))\n}\n```\n\n### Gin\n\nDengan [gin-contrib/cors](https://github.com/gin-contrib/cors)\n\n```go\npackage main\n\nimport (\n  \"time\"\n\n  \"github.com/gin-contrib/cors\"\n  \"github.com/gin-gonic/gin\"\n)\n\nfunc main() {\n  router := gin.Default()\n\n  router.Use(cors.New(cors.Config{\n    AllowOrigins:     []string{\"http://domain-website-kamu.com\"},\n    AllowMethods:     []string{\"GET\", \"POST\", \"OPTIONS\", \"PUT\", \"DELETE\"},\n    AllowCredentials: true,\n    MaxAge: 12 * time.Hour,\n  }))\n\n  // Routing kamu disini\n\n  router.Run()\n}\n```\n\n### Chi\n\nDengan [go-chi/cors](https://github.com/go-chi/cors)\n\n```go\npackage main\n\nimport (\n  \"net/http\"\n\n  \"github.com/go-chi/chi/v5\"\n  \"github.com/go-chi/cors\"\n)\n\nfunc main() {\n  r := chi.NewRouter()\n  \n  r.Use(cors.Handler(cors.Options{\n    AllowedOrigins:   []string{\"http://domain-website-kamu.com\"},\n    AllowedMethods:   []string{\"GET\", \"POST\", \"OPTIONS\", \"PUT\", \"DELETE\"},\n    AllowCredentials: true,\n    MaxAge:           2592000, \n  }))\n\n  // Routing kamu disini\n\n  http.ListenAndServe(\":8080\", r)\n}\n```\n\n### Fiber\n\nDengan [fiber/middleware/cors](https://github.com/gofiber/fiber/tree/master/middleware/cors)\n\n```go\npackage main\n\nimport (\n\t\"github.com/gofiber/fiber/v2\"\n\t\"github.com/gofiber/fiber/v2/middleware/cors\"\n)\n\nfunc main() {\n\tapp := fiber.New()\n\n\tapp.Use(cors.New(cors.Config{\n\t\tAllowOrigins:     \"http://domain-website-kamu.com\",\n\t\tAllowMethods:     \"GET, POST, OPTIONS, PUT, DELETE\",\n\t\tAllowCredentials: true,\n\t\tMaxAge:           2592000,\n\t}))\n\n\t// Routing kamu disini\n\n\tapp.Listen(\":8080\")\n}\n```\n\n### Echo\n\nDengan [echo/middleware](https://github.com/labstack/echo/blob/master/middleware/cors.go)\n\n```go\npackage main\n\nimport (\n\t\"github.com/labstack/echo/v4\"\n\t\"github.com/labstack/echo/v4/middleware\"\n)\n\nfunc main() {\n\te := echo.New()\n\n\te.Use(middleware.CORSWithConfig(middleware.CORSConfig{\n\t\tAllowOrigins:     []string{\"http://domain-website-kamu.com\"},\n\t\tAllowMethods:     []string{\"GET\", \"POST\", \"OPTIONS\", \"PUT\", \"DELETE\"},\n\t\tAllowCredentials: true,\n\t\tMaxAge:           2592000,\n\t}))\n\n\t// Routing kamu disini\n\n\te.Start(\":8080\")\n}\n```\n\n## Cara cepat\n\n###### Production\n\nJangan gunakan cara ini di mode production.\n\n### Ekstensi browser\n\nInstall ekstensi berikut untuk menyelesaikan masalah CORS dengan instan.\n\n##### Chrome atau Brave\n\nhttps://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf\n\n##### Firefox\n\nhttps://addons.mozilla.org/id/firefox/addon/cors-everywhere/\n\n##### Microsoft Edge\n\nhttps://microsoftedge.microsoft.com/addons/detail/allow-cors-accesscontro/bhjepjpgngghppolkjdhckmnfphffdag\n\n![hr](./hr.png)\n\n#### Brought to you by [Teknologi Umum](https://github.com/teknologi-umum)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flamualfa%2Fcors_id","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flamualfa%2Fcors_id","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flamualfa%2Fcors_id/lists"}