常見的解決方案可以從服務端考慮，也可以從代理層（一般都是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代理

這種主要是從架構上調整，對外暴露一個統(tǒng)一的域名，其他的請求，不管是服務端還是靜態(tài)資源都通過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/;
    }
}

這種對于小團隊而言比較適合，大公司一般都有超復雜的業(yè)務和N多的域名，所以上面第二種比較合適。

CDN通過實現跨域

另外目前常見的是把靜態(tài)資源存放到云端的對象存儲中（阿里云的OSS，騰訊云的COS）等，然后在其前面綁定一個CDN域名，進行資源的加速訪問。

所以實際的跨域是在對應的對象存儲bucket上面進行配置

• 阿里云是在bucket的 權限配置→ 跨域設置 中配置，
• 騰訊云是在bucket的 安全管理 → 跨域訪問CORS設置。

其他云可以參考云端文檔，配置簡單。這里以阿里云為展示

image.png