关于跨域问题

常见的解决方案可以从服务端考虑,也可以从代理层(一般都是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
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 什么是 跨域不同域名之间进行访问。跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器...
    小草莓蹦蹦跳阅读 1,138评论 0 1
  • 一、在前端开发过程中,如果准备开发富应用,跨域的问题将会随之而来。 我们先看看什么是跨域呢: 所谓跨域,或者异源,...
    odirus阅读 915评论 5 1
  • 前端 可以用代理来解决 但是只能在本地跑,如果部署到线上的话还是需要后端设置允许跨域,或者配置反向代理。 reac...
    张张张不慌张阅读 318评论 0 0
  • 跨域问题的由来 相信很多人都或多或少了解过跨域问题,尤其在现如今前后端分离大行其道的时候。 你在本地开发一个前端项...
    逅弈阅读 1,162评论 0 9
  • 1. 早期对跨域的理解: 以前对于跨域的认识很肤浅,仅仅停留在"我在浏览器输入了一个域名,那么浏览器出去安全性的考...
    千茉紫依阅读 1,553评论 0 1