公网请求内网资源的跨域问题

案例: vuepress项目中的笔记的图片使用内网链接, 在使用tailscale内网组网后,使用一个公网ip访问,导致图片资源无法获取, 浏览器报错:

原因:使用公网ip访问网站获取了html文件,但是html网页中的img等资源来自于内网环境,例如 <img src="http://192.168.31.124/logo.png"> 此时就会产生跨域问题, 一般来说 js,css, img等标签是不会有跨域问题的(浏览器允许协议,域名,端口不同的跨域). 一般有跨域问题的都是ajax请求,form表单请求啥的.

解决方案:

1. 设置浏览器,取消这种网络环境的限制
   • Chrome或者edge浏览器, 在输入框,谷歌输入 chrome://flags/, edge输入edge://flags/.
   • 找到 Block insecure private network requests, 设置为 disabled, 既禁用
2. 将网页(html)资源,以及其他静态资源,都改为https协议获取(未测试,不知道实际是否可用..)
3. 使用代理,例如nginx,将图片等资源的请求路径改为nginx,由nginx去获取图片资源并返回
   • 注意的是: Nginx 的图片链接也不要是私网的,否则还是会出现这个问题

网上的我看不懂的解决方案:
https://blog.csdn.net/yezizxcb/article/details/124614002

什么时候会发生跨域?

当不遵守同源策略时, 同源策略:

1. 协议不同: 比如 http , https , file
2. 域名不同
3. 端口不同.

例外情况

1. script标签的src 不会产生跨域问题.
2. img的src不会产生跨域问题 但是会发生CORB(跨域读取阻塞), 检测标准是依据响应数据的类型(Content-Type), 比如说对于图片来说, 响应的格式应该是一个图片的格式. 如果不是就会发生CORB, 浏览器会将响应体置空.

测试

我通过使用express搭建的服务器. img标签不会发生跨域问题.而是会发生CORD

CORB

相关资料 (opens new window)

服务器的跨域相关的请求头

在API服务器端，可以设置如下响应头：

• Access-Control-Allow-Origin：允许的源列表，可以指定某个具体的源，或使用通配符"*"来表示任意源。
• Access-Control-Allow-Methods：允许的HTTP请求方法列表，例如"GET"、“POST”、“PUT”、"DELETE"等。
• Access-Control-Allow-Headers：允许的HTTP请求头列表。

服务器设置了Access-Control-Allow-Origin后.

如果Access-Control-Allow-Origin中排除了一些域名. 当这些域名被访问时, 就会被拒绝, 但会状态码403... 但是实际上还是得处理这些请求, 对方可以通过控制别的机器,ddos 发送跨域请求攻击.