vue项目里涉及请求第三方接口时,通过设置proxyTable能够解决跨域问题,所以通过npm run dev启动本地服务器后跨域问题不存在,但项目经过npm run build打包后上传到云服务器再访问网站时,跨域问题是存在的。这是因为本地服务器是node服务器,node服务器通过设置proxyTable解决了跨域问题,而上传到云服务器后你用的大概是apache或者Nginx服务器,这个服务器如果遇到跨域问题需要设置反向代理来解决:
本例以apache服务器为例,讲下在宝塔环境下web静态服务器如何通过设置反向代理解决跨域请求:
假如我的网站是https://aaa.gdsh437.com,网站里有向远程服务器https://bbb.dssse123.com请求数据,所有请求接口url都是带有api的形式如:https://aaa.gdsh437.com/api/to.html,这时我们打开宝塔面板找到对应的网站点击设置,在设置面板点击反向代理,然后点击添加反向代理:
添加后点击配置文件,因为接口时https请求,需要在配置文件里对应位置添加如下两行后保存:
SSLProxyCheckPeerCN Off
SSLProxyCheckPeerName Off
这样就设置完成了。
这里有2点需要注意:
第一:设置代理目录时尾部一定要加反斜杠。
第二:目标URL尾部一定不要加反斜杠。
最后通过配置文件可以检验下有没有多的或少的反斜杠就行(如果连续出现2个反斜杠那就是多了)。
关于https请求图一中要求加的两行代码是笔者网上查阅搜索引擎看都让加上,如果不加能不能正常笔者没经过测试。