涉及请求第三方接口vue项目打包上传宝塔面板服务器后解决跨域问题

来源:IT星空
访问量:246
发布日期:2023-09-29

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请求图一中要求加的两行代码是笔者网上查阅搜索引擎看都让加上,如果不加能不能正常笔者没经过测试。