加载外部资源的跨域问题

约 450 字大约 2 分钟

2025-02-13

问题的现象

浏览器提示 CORS policy 错误，所加载的底图、地形、模型等外部数据没有显示。F12 中提示 CORS 相关错误。

因为浏览器的安全性要求，openlayer 和 mirage2d 加载外部资源时，有时候服务会报错，需要服务端允许跨域访问，跨域问题的终极解决方法在服务端：

若服务端可控：添加跨域头
若服务端不可控：添加代理服务，代理方式有很多，我们有 2 种推荐的方式：
1.可以使用nginx来代理，需要有一定 nginx 基础知识。
2.可以使用https://github.com/muyao1987/web-proxy发布的服务，并在相关代码配置 proxy 属性，来代理转发相关请求。

Access-Control-Allow-Origin 是 HTML5 中定义的一种服务器端返回 Response header，用来解决资源（比如字体）的跨域权限问题。它定义了该资源允许被哪个域引用，或者被所有域引用（google 字体使用*表示字体资源允许被所有域引用）。

由于浏览器同源策略，凡是发送请求 url 的协议，域名，端口三者之间任意一个与当前页面地址不同即为跨域，存在跨域的情况：