常見的解決方案可以從服務端考慮，也可以從代理層（一般都是Nginx/openrestry）考慮；
解決跨域核心是添加配置 Access-Control-Allow-Origin
服務端控制
前端請求不用關注，服務端在接受跨域請求的時候，進行header頭的配置，一般類似如下
req.header("Access-Control-Allow-Origin", "www.xxx.com");
req.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
目前這種方式用的很少
Nginx層做代理
這里主要是在對應的location中進行add_header配置，具體配置如下
location /xxx {
add_header Access-Control-Allow-Origin $http_origin;
add_header Access-Control-Allow-Methods 'GET,HEAD,OPTIONS,POST,PUT';
add_header Access-Control-Max-Age 3600;
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Headers $http_access_control_request_headers;
}
特殊的Nginx代理
這種主要是從架構上調整，對外暴露一個統一的域名，其他的請求，不管是服務端還是靜態資源都通過location代理，舉例如下
server {
listen 80;
server_name www.xxx.com;
location /api {
proxy_pass http://192.168.2.2:8080;
}
location /static {
root /data/www/xxx.com/;
}
}
這種對于小團隊而言比較適合，大公司一般都有超復雜的業務和N多的域名，所以上面第二種比較合適。
CDN通過實現跨域
另外目前常見的是把靜態資源存放到云端的對象存儲中（阿里云的OSS，騰訊云的COS）等，然后在其前面綁定一個CDN域名，進行資源的加速訪問。
所以實際的跨域是在對應的對象存儲bucket上面進行配置
- 阿里云是在bucket的 權限配置→ 跨域設置 中配置，
- 騰訊云是在bucket的 安全管理 → 跨域訪問CORS設置。
其他云可以參考云端文檔，配置簡單。這里以阿里云為展示
image.png
