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

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

1. 服務(wù)器端配置 CORS： 最直接的解決 CORS 問題的方法是在服務(wù)器端進(jìn)行配置。服務(wù)器需要設(shè)置響應(yīng)頭，允許特定的源訪問資源。例如，在 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();
});

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

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

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

請(qǐng)注意，JSONP 只支持 GET 請(qǐng)求，并且安全性較低，因?yàn)樗试S執(zhí)行從其他域加載的 JavaScript 代碼。

3. 使用代理服務(wù)器： 可以搭建一個(gè)代理服務(wù)器，讓所有的跨域請(qǐng)求先發(fā)送到代理服務(wù)器，然后由代理服務(wù)器轉(zhuǎn)發(fā)到目標(biāo)服務(wù)器。這樣，前端應(yīng)用就可以繞過瀏覽器的同源策略限制。在 AngularJS 中，可以使用 $http 服務(wù)結(jié)合 Node.js 的 http-proxy-middleware 中間件來實(shí)現(xiàn)代理。例如，在 config.json 中配置代理：

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

然后在 AngularJS 應(yīng)用中發(fā)送請(qǐng)求：

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

這樣，所有以 /api 開頭的請(qǐng)求都會(huì)被代理到 https://api.example.com。

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