Corserror解決

一、Corsage基本意思

Corsage可是花冠的意思，其中CORS是Cross-Origin Resource Sharing的縮寫，意為跨源資源分享。

CORS是一個瀏覽器安全機制，用於限制從一個源中訪問另一個源中的資源。 具體來說，當您在JavaScript中向其他域發出HTTP請求時，瀏覽器必須第一次向該域發出OPTIONS請求以獲取CORS頭部信息。

二、什麼是CORS錯誤

CORS錯誤是由瀏覽器引發的一種錯誤，它表明瀏覽器在請求資源時遵循CORS規則，並且由於安全策略未在請求頭中正確設置而被拒絕。

三、CORS錯誤的原因和如何解決

1. 未正確設置響應標頭

CORS錯誤由於伺服器未正確設置響應標頭而導致。在此處，我們需要設置CORS響應標頭，以使瀏覽器知道我們允許哪些域訪問資源。

示例代碼：

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: *');
header('Access-Control-Allow-Headers: *');

2.使用代理伺服器

代理伺服器是瀏覽器和Web伺服器之間的一個中間層。 如果我們的代碼在Web伺服器上，可以使用代理伺服器來減少CORS錯誤。

示例代碼：

const proxyurl = "https://cors-anywhere.herokuapp.com/";
const url = "http://example.com";
fetch(proxyurl + url)
  .then(response => response.text())
  .then(contents => console.log(contents))
  .catch(() => console.log("Can』t access " + url + " response. Blocked by browser?"))

3. 使用JSONP（JSON with Padding）技術

JSONP是一種JavaScript的跨域通信技術。 它通過在請求的URL中添加一個回調函數參數來繞過CORS錯誤，並使用該函數來解析數據。

示例代碼：

前端代碼：

(function(){
  const script = document.createElement('script')
  script.src = 'http://localhost:9001/data.json?callback=parseData'
  document.getElementsByTagName('head')[0].appendChild(script)
  
  function parseData(data){
    console.log(data)
  }
})()

後端代碼：

app.get('/data.json', function(req, res){
  const data = {a: 'apple', b: 'banana'}
  const cb = req.query.callback
  if(cb){
    res.send(cb + "(" + JSON.stringify(data) + ")")
  } else {
    res.send(JSON.stringify(data))
  }
})

4. 允許使用憑證

默認情況下，如果CORS請求包含憑證（如cookies、HTTP認證或客戶端SSL證書等），則它將被拒絕。為了允許使用憑證，我們需要將CORS響應標頭的Access-Control-Allow-Credentials設置為true。

示例代碼：

header('Access-Control-Allow-Origin: http://localhost:9000');
header('Access-Control-Allow-Credentials: true');

5. 使用Chrome插件解決CORS

如果您在使用Chrome瀏覽器並且不想修改伺服器端配置，則可以使用跨域插件來解決CORS錯誤。

四、總結

我們可以通過以上幾種方法來解決CORS錯誤。對於大多數開發人員來說，默認情況下允許所有域訪問資源應該足夠解決CORS問題。 但是，如果您嘗試訪問與您的域不同的第三方API，則可能需要使用其他方法。