• ArcGIS API for JavaScript 4.x 本地部署之跨域问题解决法:CORS


    众所周知,在离线部署ArcGIS API for JavaScript时,有时候会产生微件上的字体、符号变成方框的问题。这是遇到了跨域,只需要对所在服务器进行配置即可。

    本篇使用的环境是:API配置在Nginx服务器1中,测试页面在Nginx服务器2中,服务器1端口为1569,服务器2端口为1581。

    此时,测试页面请求API中的字体、符号资源时,属于端口不同产生的跨域。

    所以,要配置Nginx服务器1(端口1569)的跨域信息。

    最后,我还用Apache服务器(端口1570)上的测试页面,对Nginx服务器1进行跨域访问(端口1569)

    关于IIS、Apache只需找到如何配置Access-Control-Allow-Origin这个参数的资料即可,原理类似。

    ps:除了CORS,官方更推荐使用代理,可以查阅官方帮助文档中的Guide部分。

    1. 配置Nginx服务器1(地址:http://localhost:1569)

    打开conf/nginx.conf文件,如下添加一行:

    意思是,该Nginx服务器允许来自http://localhost:1581的跨域请求。

    或者在http下的server下的location指定:

    然后打开测试页面(测试页面我copy了一份SceneView的demo :点我

    我惊讶地发现Chrome这个沙雕警告并报错(清除缓存重新打开Chrome后解决了),然而在edge、IE、火狐上都没问题。

    2. 四浏览器验证(Nginx服务器2的测试页面访问Nginx服务器1的API资源)

    截图如下

    均无问题。

    3. Apache服务器(端口1570)验证

    刚开始是失败的,又是Chrome的缓存问题,清除缓存重新加载页面就好了。

    4. 注意事项

    4.1 Chrome浏览器记得清除缓存

    如果不清除缓存,切换不同服务器上的测试页面仍然会跨域(Chrome nmsl)

    4.2 Nginx服务器1(端口1569)重新配置后需要重启

    这不废话吗...

    5. 遗留问题

    5.1 Nginx服务器如何配置多个跨域地址

    上文只单独为Nginx服务器2或者Apache服务器配置了跨域,如何能让Nginx服务器2和Apache服务器同时访问Nginx服务器1上的API资源,我还没有学习。

    应该还是在Nginx服务器1上的配置文件进行设置,需要查阅资料;

    5.2 Chrome未清除缓存时请求报错信息

    在调试页面的Network选项卡中,看到请求头有一个"Provisional headers are Shown",这个信息我还没查过,但是只要清除了缓存就没了(如果API所在服务器的CORS配置是准确的话)

    6. 废话

    如果把测试页面放在API同一个服务器下,就不会产生跨域了(狗头保命)(滑稽)

  • 相关阅读:
    作用域 + this指向 的一道没面试题
    找出数组中最大的值
    统计数组中每个值出现的次数, 统计对象中每个字符出现的次数
    uniapp在h5 和 APP 端兼容性 bug 解决方案
    数组去重的常用方法,利用Promise实现函数按序执行
    momentjs实现距离当前时长并且回现中文效果
    SQL server 上机练习题
    JS 9
    JS 8
    JS 7
  • 原文地址:https://www.cnblogs.com/onsummer/p/10729781.html
Copyright © 2020-2023  润新知