Author Topic: แก้ไขปัญหา Cross-Origin Resource Sharing (CORS)  (Read 2263 times)

golfreeze

  • Administrator
  • Hero Member
  • *****
  • Posts: 1997
    • View Profile
    • นั่งสมาธิ สติปัฏฐานสี่ พาเที่ยววัด แนะนำวัด แจกcd ธรรมะฟรี
    • Email
แก้ไขปัญหา Cross-Origin Resource Sharing (CORS)
« on: พฤศจิกายน 23, 2019, 10:32:28 AM »
แก้ไขปัญหา Cross-Origin Resource Sharing (CORS) ใน dev-tool ของ browser ขึ้นเตือน

เกิดจากในหน้าเว็บมีการเรียกใช้งาน url ระหว่าง frontend , backend แยกกันซึ่งทำให้ resource
บางส่วนไม่ได้ถูกแชร์หรืออนุญาตให้ url มาดึงได้ ดังนั้นเลยต้องประกาศว่า ให้ url ไหนบ้างที่สามารถมาดึง resource ได้ 

===== Basic
Access-Control-Allow-Origin: คือ Origin ที่อนุญาตให้ใช้ Resource ร่วมกันได้
Access-Control-Allow-Methods: คือ Methods ที่อนุญาตให้ใช้ในการติดต่อได้
Access-Control-Allow-Headers: คือ Headers ที่อนุญาตให้ใช้ในการติดต่อได้

==== Add in js
const express = require("express")
const app = express()
const PORT = process.env.PORT || 8445

app.use((req, res, next) => {
   let ALLOW_ORIGIN = ['domain-a.com', 'domain-b.com', 'domain-c.com']
   let ORIGIN = req.headers.origin
      if (ALLOW_ORIGIN.includes(ORIGIN)) {
        res.header('Access-Control-Allow-Origin', ORIGIN)
      }
      res.header('Access-Control-Allow-Methods','POST, GET, PUT, PATCH, DELETE, OPTIONS')
      res.header('Access-Control-Allow-Headers','Content-Type, Option, Authorization')
      return next()
   })
}

app.use('/', (req,res) => res.send("test"))
app.listen(PORT, () => { console.info(`server started on port ${PORT}`)})