如何用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端口启用。经同事提点，才想起这事情，换下思路，就有了最上面的方法。