為什么跨域問(wèn)題如此棘手？

跨域問(wèn)題源于瀏覽器的同源策略(Same-Origin Policy)，該策略是重要的安全機(jī)制，但同時(shí)也給前后端分離的開(kāi)發(fā)模式帶來(lái)了挑戰(zhàn)：

• 前端應(yīng)用通常部署在獨(dú)立域名或CDN上
• RESTful API服務(wù)部署在專(zhuān)用API服務(wù)器
• 靜態(tài)資源(圖片、文件)存儲(chǔ)在對(duì)象存儲(chǔ)服務(wù)
• 微服務(wù)架構(gòu)中各服務(wù)部署在不同子域

這些常見(jiàn)場(chǎng)景都會(huì)觸發(fā)跨域限制，影響應(yīng)用功能。

傳統(tǒng)解決方案及其局限性

這些傳統(tǒng)方案要么功能受限，要么需要額外的開(kāi)發(fā)和維護(hù)成本。

阿里云一站式跨域解決方案

阿里云國(guó)際站提供多種云服務(wù)原生支持CORS配置，無(wú)需額外代碼即可解決跨域問(wèn)題：

實(shí)戰(zhàn)案例：阿里云OSS解決跨域問(wèn)題

假設(shè)我們有一個(gè)AngularJS應(yīng)用需要從阿里云OSS加載圖片資源：

{
  "AllowedOrigin": ["https://www.myapp.com"],
  "AllowedMethod": ["GET", "HEAD"],
  "AllowedHeader": ["*"],
  "ExposeHeader": ["ETag", "x-oss-request-id"],
  "MaxAgeSeconds": 3600
}

angular.module('myApp').service('imageService', ['$http', 
function($http) {
  this.getImage = function(imageName) {
    return $http.get('https://my-bucket.oss-cn-hongkong.aliyuncs.com/images/' + imageName, {
      responseType: 'blob'
    });
  };
}]);

通過(guò)以上三步，即可安全地從OSS獲取資源而不觸發(fā)跨域錯(cuò)誤。

阿里云API網(wǎng)關(guān)的跨域配置

當(dāng)AngularJS應(yīng)用需要調(diào)用后端API時(shí)，API網(wǎng)關(guān)提供更強(qiáng)大的跨域支持：