如何用Nginx解决前端跨域问题？

From: http://www.javashuo.com/article/p-dronjfaf-s.html

 

前言

在开发静态页面时，相似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{
        listen 8888; server_name 192.168.1.100; location /{ proxy_pass http://192.168.1.100:8080; } location /api{ proxy_pass http://ni.hao.sao/api; } }

保存后，启动Nginx。

PS：并不须要太了解Nginx的配置，很简单的。

步骤四：

访问：http://192.168.1.100:8888/

搞定。

PS：注意访问的端口是‘8888’，有其余域的地址继续加location就好了。

错误示范

我一开始不太懂Nginx的配置，觉得能够以下配置。

    server{
        listen 8080; server_name 192.168.1.100; location /api{ proxy_pass http://ni.hao.sao/api; } }

之因此这么写，是我认为这样可让Nginx帮我监听8080的请求，而后只转发匹配的请求。我没有意识到的是Nginx这么写后，是须要占用8080端口的。

既然须要占用端口，那也就不能再被其余相同协议的进程占用，就致使开发的页面没法以8080端口启用。经同事提点，才想起这事情，换下思路，就有了最上面的方法。

总结

其实不只是在开发调试时候能这么干，在生产环境也能这么玩。利用Nginx转发请求以后，就可以让所要部署的静态页面不须要放在跟请求接口同域的地方。

附录

若是发现请求出现问题，且发现是Nginx的报错，那只须要找到Nginx的error.log，就能够知道缘由。

前提须要在nginx.conf配置error.log：

error_log  logs/error.log;

error.log在Mac的位置：

/usr/local/Cellar/nginx/1.15.8/logs/error.log