常见的解决方案可以从服务端考虑，也可以从代理层（一般都是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
