如何在AngularJS中處理跨域資源共享問題

在 AngularJS 中處理跨域資源共享（CORS）問題，可以通過以下幾種方法：

1. 服務器端配置 CORS： 最直接的解決 CORS 問題的方法是在服務器端進行配置。服務器需要設置響應頭，允許特定的源訪問資源。例如，在 Node.js 的 Express 框架中，可以使用以下代碼：

app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

這段代碼會為所有請求添加 Access-Control-Allow-Origin 和 Access-Control-Allow-Headers 頭，從而允許跨域請求。

2. 使用 JSONP： 如果服務器不支持 CORS，或者你無法修改服務器配置，可以考慮使用 JSONP。JSONP 是一種老舊的技術，它利用了 <script> 標簽沒有跨域限制的特性。在 AngularJS 中，可以使用 $http.jsonp() 方法發送 JSONP 請求。例如：

$http.jsonp('https://api.example.com/data?callback=JSON_CALLBACK')
  .then(function(response) {
    console.log(response.data);
  }, function(error) {
    console.log(error);
  });

請注意，JSONP 只支持 GET 請求，并且安全性較低，因為它允許執行從其他域加載的 JavaScript 代碼。

3. 使用代理服務器： 可以搭建一個代理服務器，讓所有的跨域請求先發送到代理服務器，然后由代理服務器轉發到目標服務器。這樣，前端應用就可以繞過瀏覽器的同源策略限制。在 AngularJS 中，可以使用 $http 服務結合 Node.js 的 http-proxy-middleware 中間件來實現代理。例如，在 config.json 中配置代理：

{
  "/api": {
    "target": "https://api.example.com",
    "secure": false,
    "changeOrigin": true
  }
}

然后在 AngularJS 應用中發送請求：

$http.get('/api/data')
  .then(function(response) {
    console.log(response.data);
  }, function(error) {
    console.log(error);
  });

這樣，所有以 /api 開頭的請求都會被代理到 https://api.example.com。

在選擇解決方案時，需要考慮服務器的支持情況、安全性和開發成本。通常情況下，服務器端配置 CORS 是最推薦的方法。