V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Elissa
V2EX  ›  程序员

vue 项目使用 ArcGIS 服务提示跨域问题, nginx 反向代理也不行

  •  
  •   Elissa · 2021-06-09 19:25:48 +08:00 · 1339 次点击
    这是一个创建于 1268 天前的主题,其中的信息可能已经有所发展或是发生改变。

    单位内部有个 ArcGIS 的服务器,现在需要加载上面的地理要素图层,已经确认 ArcGIS 服务器是允许跨域的,之前使用 Jq 或原生 JS 写没有跨域问题,vue 使用 ArcGIS API for JS 4.19

    直接访问提示跨域问题,代码和报错如下

    let AHDX_ZH0717 = new TileLayer({
      title: "AHDX_ZH0717",
      url: "http://10.34.x.x:6080/arcgis/rest/services/AHDX_ZH0717/MapServer",
    });
    
    map.add(AHDX_ZH0717);
    
    // 提示跨域信息
    
    Access to image at 'http://10.34.x.x:6080/arcgis/rest/services/AHDX_ZH0717/MapServer/tile/7/52/105?blankTile=false' from origin 'http://127.0.0.1:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
    

    然后想到了使用 nginx 反向代理,nginx 配置文件如下

    location /gisserver {
    
        add_header Access-Control-Allow-Origin '*';
        add_header Access-Control-Allow-Headers X-Requested-With;
        add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
    
        proxy_pass http://10.34.x.x:6080/arcgis/;
        proxy_read_timeout 600s;
        proxy_redirect off;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        # ArcGIS Server 要求必须添加 X-Forwarded-Host 反代标头
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
    

    此时 vue 项目的代码改为(nginx 在本地 9090 端口)

    let AHDX_ZH0717 = new TileLayer({
      title: "AHDX_ZH0717",
      url: "http://127.0.0.1:9090/gisserver/rest/services/AHDX_ZH0717/MapServer",
    });
    
    map.add(AHDX_ZH0717);
    
    // 提示跨域配置重复
    
    Access to fetch at 'http://127.0.0.1:9090/gisserver/rest/services/AHDX_ZH0717/MapServer?f=json' from origin 'http://127.0.0.1:8080' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values 'http://127.0.0.1:8080, *', but only one is allowed. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
    
    // 如果注释掉 nginx 配置文件的跨域设置则提示
    
    Access to image at 'http://127.0.0.1:9090/gisserver/rest/services/AHDX_ZH0717/MapServer/tile/7/52/106?blankTile=false' from origin 'http://127.0.0.1:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
    

    现在头都大了,有没有好兄弟知道咋解决

    Elissa
        1
    Elissa  
    OP
       2021-06-09 19:45:31 +08:00
    现在在浏览器直接访问瓦片的 url 正常,直接访问和反代都可以
    ZhaoHuiLiu
        2
    ZhaoHuiLiu  
       2021-06-09 21:41:35 +08:00
    @Elissa
    图片能直接访问和反代可以,而程序不可以是因为下面的原因:
    浏览器的 canvas 调用了 瓦片 像素二进制数据,如果你的图片跨域的话,那么 canvas 是不允许修改跨域的图片的。

    Nginx 完美解决前后端分离端口号不同导致的跨域问题
    https://blog.csdn.net/z69183787/article/details/104952462
    Elissa
        3
    Elissa  
    OP
       2021-06-09 21:52:02 +08:00
    @ZhaoHuiLiu 已经用 nginx 了,还是会有跨域的问题
    SmiteChow
        4
    SmiteChow  
       2021-06-10 09:11:42 +08:00
    "已经确认 ArcGIS 服务器是允许跨域的"你这个确认不对,浏览器提示没有'Access-Control-Allow-Origin'就一定没有
    ZhaoHuiLiu
        5
    ZhaoHuiLiu  
       2021-06-10 11:55:59 +08:00
    @Elissa http://127.0.0.1:9090 和 http://127.0.0.1:8080 端口不一样啊,这也是跨域啊
    Elissa
        6
    Elissa  
    OP
       2021-06-10 13:57:16 +08:00
    @ZhaoHuiLiu 所以我在本机的 nginx 也配置了允许跨域,但是一加上就提示跨域重复(详情见正文 // 提示跨域配置重复)
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3178 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 13:32 · PVG 21:32 · LAX 05:32 · JFK 08:32
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.