关于跨域问题

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