前后端分离的vue项目部署到测试环境后，在火狐浏览器无法打开

前后端分离的vue项目部署到测试环境后，在火狐浏览器无法打开

把前后端分离的项目（前端vue，后端Java）部署到服务器上后，在Google浏览器能正常打开，在火狐浏览器无法打开，F12提示“已拦截跨源请求：同源策略禁止读取位于 https://xxx.com:8080 的远程资源。（原因：CORS 头 ‘Access-Control-Allow-Origin’ 不匹配 ‘null’）”

问题原因

经过对比火狐浏览器和谷歌浏览器的请求头发现，火狐的请求头里Origin为null，而正常情况下Origin应该是系统的请求地址；如下对比图：

火狐的请求头：

而正常的请求头：

通过查阅了博文"火狐浏览器跨域请求头 origin 丢失问题"了解到在火狐浏览器中，当接口进行了一次转换时，请求的origin就会丢失。

经排查发现，运维在Nginx上配置时把前端请求后端的接口IP配置成了http,而后端是加了证书的，真正的请求是https，这样就导致前端请求后端接口提示跨域；为了解决这个问题，我在前端html文件上加了https强制转换<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">，也就是这个转换导致了火狐浏览器请求头origin的丢失。

解决方案

运维修改前端配置，将前端请求后端的接口配置改为https后问题就解决了