如何用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{
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热部署的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-12-12
Nginx中roxy_set_header与add_header区别举例浅析
proxy_set_header是一个 Nginx 配置指令,用于设置将要转发到后端服务器的 HTTP 请求头,这篇文章主要给大家介绍了关于Nginx中roxy_set_header与add_header区别的相关资料,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了Centos下编译安装Nginx的教程详解,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-12-12
nginx运行报错:unknown directive “stream“的解决方案
这篇文章主要给大家介绍了nginx 运行报错：unknown directive "stream"的原因,主要是因为没有安装stream模块导致的,我们只需要编译安装一下stream模块即可解决这个问题,文中有详细的解决方案,需要的朋友可以参考下2023-09-09
使用Bash脚本和Logrotate实现Nginx日志切割的方法
Logrotate是一个Linux系统上用来管理日志文件的工具,它可以定期轮转日志文件、压缩旧的日志文件以及删除过期的日志文件,这篇文章主要介绍了使用Bash脚本和Logrotate实现Nginx日志切割,需要的朋友可以参考下2024-05-05
今天是周末小编在值班哈，很开森，工作使我快乐，本文重点给大家介绍Linux中Nginx的防盗链和优化问题及实现代码，需要的朋友跟随小编一起看看吧2021-06-06
要在 Nginx 中配置不同的访问路径对应不同的项目目录,可以使用 Nginx 的 location 指令来实现,本文主要介绍了nginx不同的访问路径对应项目不同的目录的实现方法,具有一定的参考价值,感兴趣的可以了解一下2023-09-09
本文将介绍Nginx的listen指令及其在配置文件中的应用,通过了解listen指令,我们可以知道Nginx如何监听端口,并配置相应的服务器块来处理进入的请求2023-12-12
这篇文章主要介绍了nginx命令参数用法详细介绍的相关资料,希望通过本文可以帮助到大家理解并应用这部分知识，需要的朋友可以参考下2017-08-08
这篇文章主要给大家介绍了关于nginx中一个请求的count计数跟踪的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-01-01
最新评论