AngularJS中如何處理跨域請求

在 AngularJS 中，處理跨域請求可以通過以下幾種方法：

1. CORS（跨域資源共享）: CORS 是一種跨域訪問的機制，允許服務器通過設置響應頭信息來控制哪些源（域名、協議和端口）可以訪問其資源。在服務器端，需要設置一些響應頭來允許跨域請求。例如，使用以下響應頭可以允許所有源進行跨域請求：

Access-Control-Allow-Origin: *

或者，只允許特定源進行跨域請求：

Access-Control-Allow-Origin: https://example.com

2. JSONP（JSON with Padding）: JSONP 是一種跨域數據交互的方法，它利用了 <script> 標簽沒有跨域限制的特性。在 AngularJS 中，可以使用 $http.jsonp() 方法來實現 JSONP 請求。但需要注意的是，JSONP 只支持 GET 請求。

示例：

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

3. 反向代理: 在本地開發環境中，可以通過設置反向代理來解決跨域問題。這樣，前端請求會先發送到同源的代理服務器，然后由代理服務器轉發請求到目標服務器。在 AngularJS 中，可以使用 http-proxy-middleware 中間件來實現反向代理。

首先，安裝 http-proxy-middleware：

npm install http-proxy-middleware --save

然后，在 webpack.config.js 文件中配置反向代理：

module.exports = {
  // ...
  devServer: {
    proxy: {
      '/api': {
        target: 'https://api.example.com',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
  // ...
};

現在，前端請求可以使用相對路徑訪問目標服務器的資源，例如：

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

這些方法可以根據實際需求選擇使用。在生產環境中，推薦使用 CORS 或反向代理來解決跨域問題。