今天剛好有碰到同事提到cross site的問題，這好像是蠻多人的困擾。
雖然網路上很多文章，但這邊也順便來紀錄一下自已的做法。

目前大家的開發習慣，大部份都前後端分開了，所以跨網域的問題就隨之而來。
其實我自已設定起來蠻簡單，也蠻直覺的。
主要分為：前端設定、後端設定

前端設定

1. 在發送請求的時後，需要在header設定好相關參數
2. 假設有一個json-server(http://localhost:3000)
3. 設定 Access-Control-Allow-Origin": http://localhost:3000
4. 這個設定主要是告訴browser可以接受這個網域的response
5. Access-Control-Allow-Methods": "GET, PUT, POST, DELETE, OPTIONS
6. Allow-Methods 設定可以進行溝通的methods
7. (optional) Access-Control-Max-Age": "86400
8. 這個設定可以告訴browser在時間內不用在進行確認網域的動作，也可以不進行該設定

"Access-Control-Allow-Origin": http://localhost:3000,
"Access-Control-Allow-Methods": "GET, PUT, POST, DELETE, OPTIONS",
"Access-Control-Max-Age": "86400"

後端設定 laravel php

參考

1. 安裝cors套件 composer require barryvdh/laravel-cors
2. 在 app/Http/Kernel.php 注入 \Barryvdh\Cors\HandleCors::class
3. 執行指令 php artisan vendor:publish --provider="Barryvdh\Cors\ServiceProvider"
4. 會得到一個檔案 cors.php 在 config的目錄下(如下)
5. 假設前端為localhost:8000，所以在allowedOrigins設定

<?php
return [
    /*
    |--------------------------------------------------------------------------
    | Laravel CORS
    |--------------------------------------------------------------------------
    |
    | allowedOrigins, allowedHeaders and allowedMethods can be set to array('*')
    | to accept any value.
    |
    */
   
    'supportsCredentials' => false,
    'allowedOrigins' => ['http://localhost:8080'],  //假設來源DNS
    'allowedOriginsPatterns' => [],
    'allowedHeaders' => ['*'],
    'allowedMethods' => ['*'],
    'exposedHeaders' => [],
    'maxAge' => 86400,
];

完成

其實不管是什麼語言，設定的概念應該都會雷同
詳細內容我就是參考這篇。
相信這類的設定會因為Devops的概念而越來越重要。