การใช้งาน CORS แก้ปัญหา Cross Domain Origin ใน Express

<?php
/** Error reporting */
error_reporting(E_ALL);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);
$filename = "provinces.json"; // กำหนดชื่อไฟล์ที่ต้องการ
header('Content-disposition: attachment; filename='.$filename);
header('Content-type: application/json');
// โค้ดไฟล์ dbconnect.php ดูได้ที่ http://niik.in/que_2398_5642
require_once("dbconnect.php");
?>
<?php
$json_data = array();
$sql = "
SELECT
province_id,
province_name,
province_name_eng
FROM tbl_provinces
ORDER BY province_id
";
$result = $mysqli->query($sql);
if($result && $result->num_rows > 0){
    while($row = $result->fetch_assoc()){
        $json_data[] = array(
            "_id" => (int)$row['province_id'],
            "name_th" => $row['province_name'],
            "name_en" => $row['province_name_eng']			
        );
    }
}
// แปลง array เป็นรูปแบบ json string  
if(isset($json_data)){  
    $json= json_encode($json_data, JSON_UNESCAPED_UNICODE);    
	$patternFind = array('/},{/','/^\[/','/\]$/');
	$patternReplace = array("}\r\n{","","");
	$json = preg_replace($patternFind, $patternReplace, $json);
   	echo $json;
}
?>

mongoimport --host <HOST>:<PORT> --ssl --username mangouser --password <PASSWORD> 
--authenticationDatabase admin --db <DATABASE> --collection <COLLECTION> --type <FILETYPE> 
--file <FILENAME>

mongoimport --db testdb --collection provinces ^
          --authenticationDatabase admin --username <user> --password <password> ^
          --drop --file c:/data/json/provinces.json

mongoimport --db testdb --collection provinces ^
          --drop --file c:/data/json/provinces.json

mongoimport --db testdb --collection provinces --drop --file c:/data/json/provinces.json

const db = require('../../config/db')

const Provinces = {
    get:((id, req, res)=>{ // ฟังก์ชั่นแสดงข้อมูลจังหวัดอิงจาก id
        return new Promise((resolve, reject)=>{
            db.then((db)=>{ 
                db.collection('provinces') 
                .find({_id:+id}) // แสดงข้อมูลจังหวัดตามค่า id ที่เป็น int สิ่งเข้ามา
                .sort({_id:1}) // เรียกจาก ค่า _id ASC
                .toArray( (error, results) => {
                    if(!error){
                        if(results.length > 0){
                            resolve(results)
                        }else{
                            reject(null)
                        }
                    }else{
                        reject(null)
                    }
                })
            })     
        })
    }),
    list:((req, res) => { // ฟังก์ชั่นแสดงข้อมูลจังหวัดทั้งหมด
        return new Promise((resolve, reject)=>{
            db.then((db)=>{ 
                db.collection('provinces') 
                .find()
                .sort({_id:1}) // เรียกจาก ค่า _id ASC (-1 == DESC)
                .toArray( (error, results) => {
                    if(!error){
                        if(results.length > 0){
                            resolve(results)
                        }else{
                            reject(null)
                        }
                    }else{
                        reject(null)
                    }
                })
            })     
        })
    })
}

module.exports = Provinces

const express = require('express')
const router = express.Router()
const Provinces = require('../models/provinces') // ใช้งาน Provinces Model
   
router.route('/provinces?')
    .all((req, res, next) => { 
        next()
    })
    .get((req, res, next) => { 
		// เรียกใช้ฟังก์ชั่น list() แสดงข้อมูงจังหวัดทั้งหมด
        Provinces.list(req, res).then(
            (results)=>{
                return res.json(results)                
            },
            (error)=>{
                return res.json({})
            }
        )
    })
    .post((req, res, next) => {   
        return res.json({})
    })
   
router.route('/province/:id')
    .all((req, res, next) => { 
        next()
    })
    .get((req, res, next) => { 
        let id = req.params.id
		// เรียกใช้ฟังก์ชั่น get() แสดงข้อมูงจังหวัดตามค่า _id ที่ต้องการ
        Provinces.get(id, req, res).then(
            (results)=>{
                return res.json(results)                
            },
            (error)=>{
                return res.json({})
            }
        )
    })
    .put((req, res, next) => {   
        return res.json({})
    })
    .delete((req, res, next) => { 
        return res.json({})
    })
   
module.exports = router

const express = require('express')
const router = express.Router()
const provinceApi = require('./routes/provinces')
// const anotherApi = require('./routes/anotherapi')

router.use('/',
    [
        provinceApi
//      anotherApi,
    ]
)

module.exports = router

const express = require('express')  // ใช้งาน module express
const app = express()  // สร้างตัวแปร app เป็น instance ของ express
const path = require('path') // เรียกใช้งาน path module
const cookieParser = require('cookie-parser')
const session = require('express-session')
const store = require('./config/storeDb')
const { authorize } = require('./config/auth')
const { useSession } = require('./config/session')
const csrf = require('csurf')
const createError = require('http-errors') // เรียกใช้งาน http-errors module
const port = 3000  // port 
 
// ส่วนของการใช้งาน router module ต่างๆ 
const indexRouter = require('./routes/index')
const loginRouter = require('./routes/login')
const registerRouter = require('./routes/register')
const dashboardRouter = require('./routes/dashboard')
const changePasswordRouter = require('./routes/changepassword')

// ส่วนของการใช้งาน API router
const apiRouter = require('./api/index')
 
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.set('view options', {delimiter: '?'});
// app.set('env','production')
 
app.use(express.json())
app.use(express.urlencoded({ extended: false }))
app.use(cookieParser())
app.use(express.static(path.join(__dirname, 'public')))

//app.set('trust proxy', 1) // trust first proxy
app.use(session({
    name:'sid', // ถ้าไม่กำหนด ค่าเริ่มต้นเป็น 'connect.sid'
    secret: 'my ses secret',
    store:store,
    resave: true,
    saveUninitialized: true
}))
app.use(useSession)
app.use(csrf())


// กำหนด Web Routes
app.use('/', indexRouter)
app.use('/login', authorize('/me', false), loginRouter)
app.use('/register', authorize('/me', false), registerRouter)
app.use('/me', authorize('/login', true), dashboardRouter)
app.use('/changepassword', authorize('/login', true), changePasswordRouter)

// กำหนด API Routes
app.use('/api', apiRouter)

// ทำงานทุก request ที่เข้ามา 
app.use(function(req, res, next) {
    var err = createError(404)
    next(err)
})

// ส่วนจัดการ CSRF error
app.use(function (err, req, res, next) {
    // ถ้าไม่ใช้ CSRF error ให้ข้ามไปส่วนจัดการ error ปกติ
    if (err.code !== 'EBADCSRFTOKEN') return next(err)

    // ถ้าเป็น CSRF token errors ก็เช่น 
    // res.status(403)
    // res.send('form tampered with')
    // ในที่นี้ เราให้ไปยังหน้าฟอร์มนั้น และแสดงข้อความ Invalid csrf token
    // โดยใช้ req.originalUrl เพื่อลิ้งค์ไปยัง path ของหน้าฟอร์มที่ error
    res.cookie('flash_message', 'Invalid csrf token',{maxAge:3000})
    return res.redirect(req.originalUrl)    
})
 
// ส่วนจัดการ error
app.use(function (err, req, res, next) {
    // กำหนด response local variables 
    res.locals.pageData = {
        title:'Error Page'
    }    
    res.locals.message = err.message
    res.locals.error = req.app.get('env') === 'development' ? err : {}
 
    // กำหนด status และ render หน้า error page
    res.status(err.status || 500) // ถ้ามี status หรือถ้าไม่มีใช้เป็น 500
    res.render('pages/error') 
})
 
app.listen(port, function() {
    console.log(`Example app listening on port ${port}!`)
})

const express = require('express')
const router = express.Router()

router.get('/', function(req, res, next) {
    res.locals.pageData = {
        title:'Home Page'
    }  
    if(!req.cookies.my_ck1){
        res.cookie('my_ck1', 'cookie_1',{maxAge:60000})
    }
    //req.session.isLogined = true
	res.render('pages/home')
})

module.exports = router

const express = require('express')
const router = express.Router()
const { authorize } = require('../config/auth')

// เรียกใช้ Web Router
const homeRouter = require('./home')
const loginRouter = require('./login')
const registerRouter = require('./register')
const dashboardRouter = require('./dashboard')
const changePasswordRouter = require('./changepassword')

// กำหนด Web Routes
router.use('/', homeRouter)
.use('/login', authorize('/me', false), loginRouter)
.use('/register', authorize('/me', false), registerRouter)
.use('/me', authorize('/login', true), dashboardRouter)
.use('/changepassword', authorize('/login', true), changePasswordRouter)


module.exports = router

const express = require('express')  // ใช้งาน module express
const app = express()  // สร้างตัวแปร app เป็น instance ของ express
const path = require('path') // เรียกใช้งาน path module
const cookieParser = require('cookie-parser')
const session = require('express-session')
const store = require('./config/storeDb')
const { useSession } = require('./config/session')
const csrf = require('csurf')
const createError = require('http-errors') // เรียกใช้งาน http-errors module
const port = process.env.PORT || 3000  // port 
 
// ส่วนของการใช้งาน router module ต่างๆ 
const indexRouter = require('./routes/index')

// ส่วนของการใช้งาน API router
const apiRouter = require('./api/index')

 
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.set('view options', {delimiter: '?'});
// app.set('env','production')
 
app.use(express.json())
app.use(express.urlencoded({ extended: false }))
app.use(cookieParser())
app.use(express.static(path.join(__dirname, 'public')))

//app.set('trust proxy', 1) // trust first proxy
app.use(session({
    name:'sid', // ถ้าไม่กำหนด ค่าเริ่มต้นเป็น 'connect.sid'
    secret: 'my ses secret',
    store:store,
    resave: true,
    saveUninitialized: true
}))
app.use(useSession)
app.use(/^\/(?!api).*/,csrf()) // ไม่ใช้งานกับ API Routes

// กำหนด Web Routes
app.use('/', indexRouter)

// กำหนด API Routes
app.use('/api', apiRouter)

// ทำงานทุก request ที่เข้ามา 
app.use(function(req, res, next) {
    var err = createError(404)
    next(err)
})

// ส่วนจัดการ CSRF error
app.use(function (err, req, res, next) {
    // ถ้าไม่ใช้ CSRF error ให้ข้ามไปส่วนจัดการ error ปกติ
    if (err.code !== 'EBADCSRFTOKEN') return next(err)

    // ถ้าเป็น CSRF token errors ก็เช่น 
    // res.status(403)
    // res.send('form tampered with')
    // ในที่นี้ เราให้ไปยังหน้าฟอร์มนั้น และแสดงข้อความ Invalid csrf token
    // โดยใช้ req.originalUrl เพื่อลิ้งค์ไปยัง path ของหน้าฟอร์มที่ error
    res.cookie('flash_message', 'Invalid csrf token',{maxAge:3000})
    return res.redirect(req.originalUrl)    
})
 
// ส่วนจัดการ error
app.use(function (err, req, res, next) {
    // กำหนด response local variables 
    res.locals.pageData = {
        title:'Error Page'
    }    
    res.locals.message = err.message
    res.locals.error = req.app.get('env') === 'development' ? err : {}
 
    // กำหนด status และ render หน้า error page
    res.status(err.status || 500) // ถ้ามี status หรือถ้าไม่มีใช้เป็น 500
    res.render('pages/error') 
})
 
app.listen(port, function() {
    console.log(`Example app listening on port ${port}!`)
})

fetch('http://localhost:3000/api/province/5')
  .then(function(response) {  return response.json(); })
  .then(function(myJson) {  console.log(JSON.stringify(myJson));  });

Access to fetch at 'http://localhost:3000/api/province/5' from origin 'https://www.google.com' has been blocked 
by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque 
response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

npm install cors --save

const express = require('express')
const router = express.Router()
const cors = require('cors') // เรียกใช้งาน core module
const provinceApi = require('./routes/provinces')
// const anotherApi = require('./routes/anotherapi')

// ติดตั้ง cors middleware
router.use(cors()) 

router.use('/',
    [
        provinceApi
//      anotherApi,
    ]
)

module.exports = router

{
  "origin": "*",  // เรียกใช้งานจากที่ใดๆ ก็ได้ เช่น เว็บไซต์อื่น โดเมนอื่น
  "methods": "GET,HEAD,PUT,PATCH,POST,DELETE", // method ที่รองรับ
  "preflightContinue": false,
  "optionsSuccessStatus": 204  // กรณีมี OPTIONS  method ให้สถานะเป็น 204 No Content.
}

// ใช้ cors เฉพาะ Provinces API ทั้งหมด
router.use('/provinces?', cors()) 
// ใช้ cors เฉพาะ GET Method ใน Provinces API
router.get('/provinces?', cors()) 

let corsOptions = {
    origin: true
}
router.use(cors(corsOptions)) 
// หรือ
let corsOptions = {
    origin: false
}
router.use(cors(corsOptions)) 

let corsOptions = {
    origin: '*'
}
router.use(cors(corsOptions)) 
// หรือ
let corsOptions = {
    origin: 'https://www.ninenik.com'
}
router.use(cors(corsOptions)) 

// สามารถเรียกได้จาก ทั้งmที่จากเว็บไซต์ ที่ลงท้ายด้วย ninenik.com เช่น press.ninenik.com
let corsOptions = {
    origin: /\.ninenik\.com$/ 
}
router.use(cors(corsOptions)) 

let whitelist = ['https://www.ninenik.com', /\.ebiwayo\.com$/]
let corsOptions = {
    origin: whitelist
}
router.use(cors(corsOptions)) 

let whitelist = ['https://www.ninenik.com', 'http://www.ebiwayo.com']
let corsOptions = {
    origin: ((origin, callback)=>{
        if (whitelist.indexOf(origin) !== -1) {
          callback(null, true)
        } else {
          callback(new Error('Not allowed by CORS'))
        }
    })
}
router.use(cors(corsOptions)) 

let corsOptions = {
    origin: true,
    methods:['GET', 'PUT', 'POST']
}
router.use(cors(corsOptions)) 

let corsOptions = {
    origin: true,
    methods:['GET', 'PUT', 'POST'],
    allowedHeaders:['Content-Type', 'Authorization']
}
router.use(cors(corsOptions)) 

fetch('http://localhost:3000/api/provinces', {
  method: 'POST', 
  body: JSON.stringify({username: 'example'}), 
  cache: 'no-cache', 
  headers:{
    'Content-Type': 'application/json',
    'X-Csrf-Token': 'i8XNjC4b8KVok4uw5RftR38Wgp2BFwql',
  }
}).then(res => res.json())
.then(response => console.log('Success:', JSON.stringify(response)))
.catch(error => console.error('Error:', error));

• Cache-Control
• Expires
• Last-Modified
• Pragma
• Accept
• Accept-Language
• Content-Language
• Last-Event-ID
• Content-Type, กรณีกำหนดหรือใช้งาน 3 ค่านี้เท่านั้น:
• application/x-www-form-urlencoded
• multipart/form-data
• text/plain

let corsOptions = {
    origin: true,
    methods:['GET', 'PUT', 'POST'],
    allowedHeaders:['Content-Type', 'Authorization'],
    preflightContinue: true
}
router.use(cors(corsOptions)) 

router.route('/provinces?')
    .all((req, res, next) => { 
        next()
    })
    .options((req, res, next) => {   
        const reqMethod = req.headers['access-control-request-method']
        const reqHeader = req.headers['access-control-request-headers']
        if ((['GET', 'PUT', 'POST'].indexOf(reqMethod) !== -1) 
        && (reqHeader === 'authorization,content-type')){
            return res.status(204).json()   
        }
        return res.status(400).json({message:'400 Bad Request'})      
    })     
    .get((req, res, next) => { 
        return res.json({})
    })
    .post((req, res, next) => {   
        return res.json({})
    })

let corsOptions = {
    origin: true,
    methods:['GET', 'PUT', 'POST'],
    allowedHeaders:['Content-Type', 'Authorization'],
    maxAge:60,
    preflightContinue: true
}
router.use(cors(corsOptions)) 

// ติดตั้ง cors middleware
router.use(cors())