我是一名法学专业的在读研究生。出于兴趣自学了服务器相关知识。
最初接触到网站建设是很多年前wap时代的手机自助建站,那时流行的手机论坛里简洁好用的ubb让我对代码产生了兴趣与最初的理解,并且自学了一些html内容。高中时了解到了服务器的一些知识,在那时我购买了自己的第一台服务器——虽然出于经济考量买的是当时最便宜的共享主机,在性能与使用方面存在诸多限制,但也磕碰着建成了自己的wordpress博客。上大学后在同学建议下我们合购了自己的第一台独立服务器,终于体会到了root权限的自由哈哈。现在想起来都是难忘的回忆啊。
最近,在阿里云官网看到了高校学生在家实践活动,很惊讶并且赞叹阿里云居然为每位学生都提供一台免费的服务器,并且搭配有丰富的教程和免费实验资源,且不论配置如何,至少让每个人都获得了一次体验自己的云上服务器的机会。而我也正是搭上了阿里云的这趟顺风车。
在获取到阿里云提供的服务器之后,我第一时间用宝塔面板一键安装好了LNMP环境。随后玩心大起,居然首先尝试了在服务器中运行Minecraft服务端,想试试在自己的服务器中与朋友联机,但是开服的过程却不那么顺利。
在安装好Java17与Screen之后,我在screen中输入了mc开服命令,服务端程序虽然跑起来了,但是总是会半路出错,提示大概是指缺少某个库文件吧
can't load library: /use/lib/jvm/java-17-openjdk-amd64/lib/libawt_xawt.so
在网上搜索一番之后,我自行把这个文件移到了所在目录下面,结果又出行了新错误🤣
java.lang.UnsatisfiedLinkError: /usr/lib/jvm/java-17-openjdk-amd64/lib/libawt_xawt.so: libXext.so.6: cannot open shared object file: No such file or directory
这下属实是超过我的知识范围了,网上搜索也无果,我甚至又尝试了卸载重新安装Java17,也没能解决。
但是!在随后使用服务器的过程中,在一次服务器重启之后,我突然发现MC服务端居然能开起来了!困扰了一个小时的问题居然就这么解决了😂在这学会一点,看来装好Java之后最好还是要重启一下服务器来保证程序能正常运行啊。
接下来就是搭建Wordpress了,wordpress的安装过程很简单,也没有遇到什么问题。装好后就把我博客的数据给迁移过来,其中包括文章页面等数据和图床两个部分。是的,我另外开了个图床,并且给图床开了二级域名,我的图片并没有放在wordpress安装目录的wp-content下面。在这遇到了一些问题,并成功解决了,我认为很值得记录下来。这次解决过程也同样记录在了我自己的博客中。
博客迁移完后,发现页面中一些引用图床的文件不加载(以图片和字体为主),但直接访问这些文件的地址又是正常的。
找了一圈后,在Chrome控制台中看到了错误提示,资源加载失败。
现象加上错误提示后,已经能定位出问题了,搜索一番知道了是遇到了跨域请求错误问题(也叫CORS问题),后面想办法修复了。
提到这个问题,不得不先说一个浏览器中的一个安全策略:CORS,中文叫跨域资源共享标准(Cross-Origin Resource Sharing),有时也被称为同源策略,是浏览器在处理页面内引用了不同地方的资源时使用的一种机制(策略)。
在火狐开发者的官网能查到对CORS的详细解释。
跨域资源共享(CORS) 是一种机制,它使用额外的 HTTP 头来告诉浏览器让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时,资源会发起一个跨域 HTTP 请求。
简化地理解,假设说站点A(域名a.com)的页面,引用了另一台服务器B(域名b.com)中的某些图片、字体等。因为有CORS策略,浏览器就会默认请求另一个服务器的资源是不安全的,所以拒绝去加载来自b.com下的资源。
个人认为这里面有三点值得注意的地方。一是对“引用”另一台服务器的资源的定义;按照解释的描述,使用JS异步请求(也就是AJAX技术)或者是调用Fetch API,都属于“引用”。
第二点是,什么样的情况算是访问另一台服务器?根据详细解释,可以明确的是,被加载的资源网址域名不同、域名指向的服务器不同(就是说物理上的两台服务器)、协议不同(例如http与https)、访问的端口不同,都算是访问另一台服务器。对于域名的话,似乎更复杂些,一二级域名都必须相同才不算跨域。关于同源的准确说明,同样能在火狐的页面找到。
另外,从Mozilla解释的机制上来说,并不一定是浏览器限制了发起跨站请求,也可能是跨站请求可以正常发起,但是返回结果被浏览器拦截了(也就是前文所述的“拒绝加载”)。
那么怎么解决这个问题呢?Mozilla其实已经解释清楚了,需要“响应报文包含了正确CORS响应头”。
了解HTTP的人都会知道,每次HTTP请求发送的数据(也就是术语所说的“报文”),在头部都会包含一些固定的信息(术语叫字段)。CORS作为新的 W3C 标准,在HTTP头部添加了一些字段,用来让被访问的服务器声明哪些来源站有权限访问哪些资源。
换句话说,其实不是要改浏览器或原页面,而是要从被请求的外部服务器(图床)入手。给另一台服务器的响应头部(header)中添加一些信息,告诉浏览器这些资源文件可以被引用来源站点“安全”的使用,浏览器就会正常加载这些资源了,这样就不会发生跨域请求错误。
(其实我也不理解为什么要把策略要设计成这样,但确实是要这样解决……-_-||)
提一句题外话,实际上跨站请求错误的问题还有其他途径解决,但基本都是针对开发的角度入手的。这里就只用CORS标准本身来完成吧。
这里图床的服务器是Nginx环境的,所以用编辑器打开图床站点的网站配置文件,在解析规则中加入下列内容即可。
location ~ .*\.(js|css|ttf|woff|woff2)?$ {
add_header 'Access-Control-Allow-Origin' *;
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,X-Requested-With';
add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE';
}
“add_header”作用是为HTTP请求(响应)添加头部信息。其中"Access-Control-Allow-Credentials"这一项是用来让跨域请求携带Cookie信息的,如果去掉默认不会携带。
第一行是Nginx用来匹配对应的文件,括号中就是对应的资源文件的扩展名(例如:ttf),有多个就用“|”符合分开。
这里没有包含图片和其他类型媒体,是因为并没有为这些文件加入CORS的头部内容,而且分开放在防盗链的部分了。
另外还有一点,目前无法确定的地方。按照前文中Mozilla的解释,纯HTML的引用(例如通过图片标签显示图片),应该仍然符合跨域共享这个机制的约束条件内。
但是后面测试过发现,在图床(另一台)服务器上即使没有做任何调整,页面的标签中src引用跨站图片,浏览器还是能正常显示,没有触发跨域请求错误。
查了一些资料也没有发现对这一点的直接解释,网上搜到的很多内容也没有明确的说不通过JS只有HTML引用的情况是否属于CORS机制的约束范围内。结合经验来看,估计是除了通过JavaScript去访问跨站资源,纯静态的引用应该不会导致浏览器因为CORS策略不加载图片吧……
问题虽然解决了,但是网站搬迁感觉总归是一件麻烦事,每次看血统随机出现debuff。这种行为以后还是尽量减少吧。
贴一张在阿里云上搭建的博客的截图~
以及我和朋友在阿里云上开的mc服务器里搭的史莱姆小屋,哈哈