# 前端開發中遇到 CORS 的解決方法
> 前端遇到 CORS 問題，最正確且唯一的解法就是請後端在 Response Header 加上 `Allow-Origin`。

## CORS 解決方案
為什麼會發生 CORS，`就是在非同源的 Http 請求下，瀏覽器基於安全性所設的限制`，因此我們就從非同源和瀏覽器兩方面下手
### 1.Webpack-dev-server 的 proxy

最常見的應該就是利用 Webpack-dev-server 提供的代理伺服器服務，讓 proxy server 代替 client 端發出請求和接收請求，因 proxy server 和 client 同源，因此就不回有跨域問題，但因為 Webpack-dev-server 建立的時候 port 不能夠被占用，因此只能用在前後端分離狀況下。

// webpack.config.js
{ 
    ...
    devServer: {
        port: 9000,
        open: true,
        proxy: {
            '/api': {
                target: 'https://example.com',
                secure: false,
                changeOrigin: true,
            },
        },
    },
}

### 2.Ngnix
在開發端建立一個 web server 替我們轉發服務，並在回來的 Header 都加上 `Allow-Origin`

{
    server {
        #監聽埠和域名
        listen       80; 
        server_name  localhost;
        
        #新增攔截路徑和代理地址
        location /api/ {              
               add_header 'Access-Control-Allow-Origin' *;
               proxy_pass https://example.com;     
        }  
        
    }
}

### 3.Chrome Extension：[CORS Unblock](https://chrome.google.com/webstore/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino) *(最推薦)*
安裝後打開，瀏覽器每個回來的 Http Response 都會幫你加上`Allow-Origin`，可以不用像前面寫一長串設定檔(服務越多寫越多QQ)，而且前後端沒分離也能用，真心方便

## 參考
[MDN-跨來源資源共用（CORS）](https://developer.mozilla.org/zh-TW/docs/Web/HTTP/CORS)
[CORS 完全手冊（二）：如何解決 CORS 問題？](https://blog.huli.tw/2021/02/19/cors-guide-2/)