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

[Elissa]

单位内部有个 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]

现在在浏览器直接访问瓦片的 url 正常，直接访问和反代都可以

[ZhaoHuiLiu]

@Elissa
图片能直接访问和反代可以，而程序不可以是因为下面的原因：
浏览器的 canvas 调用了 瓦片 像素二进制数据，如果你的图片跨域的话，那么 canvas 是不允许修改跨域的图片的。

Nginx 完美解决前后端分离端口号不同导致的跨域问题
https://blog.csdn.net/z69183787/article/details/104952462

[Elissa]

@ZhaoHuiLiu 已经用 nginx 了，还是会有跨域的问题

[SmiteChow]

"已经确认 ArcGIS 服务器是允许跨域的"你这个确认不对，浏览器提示没有'Access-Control-Allow-Origin'就一定没有

[ZhaoHuiLiu]

@Elissa http://127.0.0.1:9090 和 http://127.0.0.1:8080 端口不一样啊，这也是跨域啊

[Elissa]

@ZhaoHuiLiu 所以我在本机的 nginx 也配置了允许跨域，但是一加上就提示跨域重复（详情见正文 // 提示跨域配置重复）