如何用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的配置,很简单的。
步骤四:
搞定。
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
本文为原创文章,转载请保留原出处,方便溯源,如有错误地方,谢谢指正。
本文地址 :http://www.cnblogs.com/lovesong/p/10269793.html
如何用Nginx解决前端跨域问题?的更多相关文章
- 【Nginx】在Windows下使用Nginx解决前端跨域问题
提出问题:因为一些历史原因,后台代码不能动.请求别人的接口拿数据显示在前端,怎么办呢? 分析问题:通过ajax请求. 解决问题:因为浏览器的同源策略,所以需要解决跨域问题.(同源策略:请求的url地址 ...
- 用nginx解决前端跨域问题
假如前端你项目部署在nginx的根目录下,然后项目需要请求后台小伙伴写的接口 nginx配置: #user nobody; worker_processes 1; #error_log logs/er ...
- nginx解决前端跨域配置
在nginx.conf文件中 添加如上配置: 在ajax中将原来的 url:http://192.168.1.127:8905/findItem 改成:'http://localhost/findIt ...
- 用nginx的反向代理机制解决前端跨域问题在nginx上部署web静态页面
用nginx的反向代理机制解决前端跨域问题在nginx上部署web静态页面 1.什么是跨域以及产生原因 跨域是指a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,或是a页面为ip地 ...
- 项目部署问题:xftp无法连接服务器、Nginx403 Forbidden解决、nginx反向代理解决前端跨域问题
一.xftp无法连接服务器 在xftp中配置正确的ip,用户名和密码后,居然无法连接 解决方案:将协议里面的FTP换成SFTP,注意换成SFTP后端口就默认换成22,要还是原来的21就还是连不上的哈 ...
- JAVA解决前端跨域问题。
什么是跨域? 通俗来说,跨域按照我自己的想法来理解,是不同的域名之间的访问,就是跨域.不同浏览器,在对js文件进行解析是不同的,浏览器会默认阻止,所以 现在我来说下用java代码解决前端跨域问题. 用 ...
- 完美解决前端跨域之 easyXDM 的使用和解析
前端跨域问题在大型网站中是比较常见的问题.本文详细介绍了利用 easyXDM 解决前端跨域的原理细节和使用细节,具体使用时可以在文中代码实例的基础上扩展完成. 0.背景 因个别网络运营商存在 HTTP ...
- 用nginx的反向代理机制解决前端跨域问题
什么是跨域以及产生原因 跨域是指a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,或是a页面为ip地址,b页面为域名地址,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制 ...
- nginx反向代理-解决前端跨域问题
1.定义 跨域是指a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源.注意:跨域限制访 ...
随机推荐
- qt 布局
说到qt布局,比起之前用的MFC好了许多,而且qt支持qss,可以更好的美化界面.qt提供了几种常见的布局管理 窗体布局,这对客户端程序来说是一个福音,再也不用操心程序界面放大缩小时界面控件怎么变化, ...
- WebSocket刨根问底(三)之群聊
前两篇文章[WebSocket刨根问底(一)][WebSocket刨根问底(二)]我们介绍了WebSocket的一些基本理论,以及一个简单的案例,那么今天继续,我们来看一个简单的群聊的案例,来进一步了 ...
- 从无到有-在create-react-app基础上接入react-router、redux-saga
搭建项目框架 新建项目 执行如下代码,用create-react-app来建立项目的基础框架,然后安装需要用到的依赖. $ npx create-react-app my-test-project $ ...
- Spring Boot分布式系统实践【2】-框架搭建
前言 技术选型已经做完,那就来搭建框架了. 首先基于mvc思想,设计这套框架也是基于此,也会设计Dao层.Service层.Controller层.视图层等,同时也要考虑到dubbo的调用原理. ...
- google的GCM推送使用简介
pom <!-- https://mvnrepository.com/artifact/com.google.gcm/gcm-server --> <dependency> & ...
- 【c#】RabbitMQ学习文档(一)Hello World
一.简介 RabbitMQ是一个消息的代理器,用于接收和发送消息,你可以这样想,他就是一个邮局,当您把需要寄送的邮件投递到邮筒之时,你可以确定的是邮递员先生肯定会把邮件发送到需要接收邮件的人的手里,不 ...
- SpringMVC学习笔记之一(SpringMVC架构及与Mybatis整合)
一.SpringMVC入门 1.1Springmvc是什么 Spring web mvc和Struts2都属于表现层的框架,它是Spring框架的一部分,我们可以从Spring的整体结构中看得出来,如 ...
- [ SSH框架 ] Spring框架学习之三(AOP开发和注解的使用)
一.Spring 使用 AspectJ 进行 AOP 的开发:注解的方式 1.1 引入相关的jar包 1.2 引入spring的配置文件 <?xml version="1.0" ...
- Mybatis动态SQL简单了解 Mybatis简介(四)
动态SQL概况 MyBatis 的强大特性之一便是它的动态 SQL 在Java开发中经常遇到条件判断,比如: if(x>0){ //执行一些逻辑........ } Mybatis应用中,S ...
- springboot情操陶冶-web配置(五)
本文讲讲mvc的异常处理机制,方便查阅以及编写合理的异常响应方式 入口例子 很简单,根据之前的文章,我们只需要复写WebMvcConfigurer接口的异常添加方法即可,如下 1.创建简单的异常处理类 ...