怎么用nginx解决前端跨域问题-mile米乐体育
这篇文章主要介绍了怎么用nginx解决前端跨域问题，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
前言
在开发静态页面时，类似vue的应用，我们常会调用一些接口，这些接口极可能是跨域，然后浏览器就会报cross-origin问题不给调。
最简单的解决方法，就是把浏览器设为忽略安全问题，设置--disable-web-security。不过这种方式开发pc页面到还好，如果是移动端页面就不行了。
解决办法
使用nginx转发请求。把跨域的接口写成调本域的接口，然后将这些接口转发到真正的请求地址。
举个栗子
例如我们在开发一个vue应用。
原先：
调试页面是： http://192.168.1.100:8080/
请求的接口是： http://ni.hao.sao/api/get/info
步骤一：
请求的接口是： http://192.168.1.100:8080/api/get/info
ps：这样就解决了跨域问题。
步骤二：
安装好nginx后，去到/usr/local/etc/nginx/目录（这是mac的），修改nginx.conf文件。
步骤三：
把默认的server配置注释掉。
在下面增加：
server{ listen8888; server_name192.168.1.100; location/{ proxy_passhttp://192.168.1.100:8080; } location/api{ proxy_passhttp://ni.hao.sao/api; } }保存后，启动nginx。
ps：并不需要太了解nginx的配置，很简单的。
步骤四：
访问： http://192.168.1.100:8888/
搞定。
ps：注意访问的端口是‘8888'，有其他域的地址继续加location就行了。
错误示范
我一开始不太懂nginx的配置，以为可以如下配置。
server{ listen8080; server_name192.168.1.100; location/api{ proxy_passhttp://ni.hao.sao/api; } }之所以这么写，是我认为这样可以让nginx帮我监听8080的请求，然后只转发匹配的请求。我没有意识到的是nginx这么写后，是需要占用8080端口的。
既然需要占用端口，那也就不能再被其他相同协议的进程占用，就导致开发的页面无法以8080端口启用。经同事提点，才想起这事情，换下思路，就有了最上面的方法。
感谢你能够认真阅读完这篇文章，希望小编分享的“怎么用nginx解决前端跨域问题”这篇文章对大家有帮助，同时也希望大家多多支持恰卡编程网，关注恰卡编程网行业资讯频道，更多相关知识等着你来学习!