本文主要介绍如何用Nginx解决前端跨域问题，具有一定的参考价值。有兴趣的朋友可以参考一下。希望你看完这篇文章后收获很大。让桂哥网络带你去理解它。

前言

在开发静态页面的时候，我们经常会调用一些类似Vue的接口，很可能是跨域的，然后浏览器会报告跨源问题。

最简单的解决方案是将浏览器设置为忽略安全问题，并设置-禁用-网络安全。不过这样开发PC页面没问题，如果是移动页面就不行了。

解决办法

使用Nginx转发请求。将跨域接口写成本地域接口，然后将这些接口转发到真实的请求地址。

举个栗子

例如，我们正在开发一个Vue应用程序。

原先：

调试页面是：http://192.168.1.10033608080/

请求的接口是：http://ni.hao.sao/api/get/info

步骤一：

请求的接口是：http://192 . 168 . 1 . 10033608080/API/get/info

PS:这样解决了跨域问题。

步骤二：

转到/usr/local/etc/Nginx/directory(这是Mac的)，在Nginx安装后修改nginx.conf文件。

步骤三：

注释掉默认的服务器配置。

添加以下内容：

服务器{

listen8888

server _ name 192 . 168 . 1 . 100；

位置/

proxy _ pass http://192 . 168 . 1 . 10033608088

}

位置/api{

proxy _ pass http://ni . Hao . Sao/API；

}

}保存后，启动Nginx。

PS:你不需要太了解Nginx配置，很简单。

步骤四：

访问：http://192.168.1.10033608888

搞定。

PS:注意，访问的端口是‘8888’，所以只需在其他域的地址中添加位置即可。

错误演示

刚开始对Nginx的配置不太了解，觉得可以配置如下。

服务器{

listen8080

server _ name 192 . 168 . 1 . 100；

位置/api{

proxy _ pass http://ni . Hao . Sao/API；

}

}之所以写这个，是因为我觉得这样可以让Nginx帮我监控8080请求，然后只转发匹配的请求。我没有意识到的是Nginx写成这样之后，需要占用端口8080。

由于需要占用端口，所以无法再被相同协议的其他进程占用，从而导致无法用8080端口启用的页面的开发。同事提了一点后，我想起来了，改变了思路，拿到了顶法。

感谢您仔细阅读本文。希望桂哥网络分享的文章《如何用Nginx解决前端跨域问题》对大家有所帮助。也希望大家支持桂哥网络，关注桂哥网络，更多相关知识等着你去学习！