这篇文章主要介绍了怎么用Nginx解决前端跨域问题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
<强>前言强>
在开发静态页面时,类似Vue的应用,我们常会调用一些接口,这些接口极可能是跨域,然后浏览器就会报跨源问题不给调。
最简单的解决方法,就是把浏览器设为忽略安全问题,设置——disable-web-security。不过这种方式开发电脑页面到还好,如果是移动端页面就不行了。
<强>解决办法强>
使用Nginx转发请求。把跨域的接口写成调本域的接口,然后将这些接口转发到真正的请求地址。
<强>举个栗子强>
例如我们在开发一个Vue应用。
<强>原先:强>
调试页面是:http://192.168.1.100:8080
请求的接口是:http://ni.hao。圣/api/会/信息
<强>步骤一:强>
请求的接口是:http://192.168.1.100:8080/api/会/信息
PS:这样就解决了跨域问题。
<强>步骤二:强>
安装好Nginx后,去到/usr/本地/etc/Nginx/目录(这是Mac的),修改Nginx。参看文件。
<强>步骤三:强>
把默认的服务器配置注释掉。
在下面增加:
,,服务器{ ,,,listen 8888; ,,,server_name 192.168.1.100; , ,,,的位置/{ ,,,,,proxy_pass http://192.168.1.100:8080; ,,,} , ,,,的位置/api { ,,,,,proxy_pass http://ni.hao.sao/api; ,,,} 以前,,}>保存后,启动Nginx。
PS:并不需要太了解Nginx的配置,很简单的。
<强>步骤四:强>
访问:http://192.168.1.100:8888
搞定。
PS:注意访问的端口是‘8888 & # 39;有其他域的地址继续加位置就行了。
错误示范
我一开始不太懂Nginx的配置,以为可以如下配置。
,,服务器{ ,,,listen 8080; ,,,server_name 192.168.1.100; , ,,,的位置/api { ,,,,,proxy_pass http://ni.hao.sao/api; ,,,} 以前,,}>之所以这么写,是我认为这样可以让Nginx帮我监听8080的请求,然后只转发匹配的请求。我没有意识到的是Nginx这么写后,是需要占用8080端口的。
既然需要占用端口,那也就不能再被其他相同协议的进程占用,就导致开发的页面无法以8080端口启用。经同事提点,才想起这事情,换下思路,就有了最上面的方法。
怎么用Nginx解决前端跨域问题