Nginx 解决Ajax跨域请求问题

前台

我们首先前台向后台发送Ajax请求，如下：这里用的是HBuilder X开发工具端口号默认是8848

<script src="js/jquery-3.3.1.js"></script>
	<script>
		function aa(){
				 $.get("http://localhost:8080/requestBody/aaa",function(data){
					 alert(data.name)
				 });
			}
	</script>

后台接口端口为8080

@RequestMapping("/aaa")
    @ResponseBody
    public Student aaa(){
        System.out.println("aaa");
        return new Student("张三",11);
    }

访问报错如下：这是由于 Ajax访问 ip或者端口与发送的ip端口不一致导致的Ajax跨域访问问题

解决如下

当然有好几种解决问题这里只阐述使用 Ngnix 正向代理来解决Ajax跨域访问问题

这里的话正向代理与反向代理简单阐述一下

正向代理
- 首先先要搭建一台代理服务器比如Ngnix服务器
- 客户端发送请求到代理服务器
- 代理服务器去请求服务器
- 服务器返回数据给代理服务器
- 代理服务器再将数据返回给客户端
  - 举一个简单的例子:
    
    你去找你爸爸借钱你爸爸没有你爸爸去找你妈妈借钱你妈妈把钱给爸爸爸爸在把钱给你（但是你妈妈并不知道是你借的钱）
    - 用途：当你用浏览器访问国外的网站时，被block(拒绝)时，你可以在国外搭建一个代理服务器，这样就可以正常访问了（只是举一个列子）
反向代理
- 客户端发送请求到服务器（客户端其实是访问的反向代理服务器,但是客户端不知道）
- 反向代理服务器发送请求到真正的服务器
- 真正的服务器返回数据给反向代理服务器
- 反向代理服务器将数据返回给客户端

作用：用户请求过多，服务器会有一个处理的极限。所以使用反向代理服务器接受请求，再用均衡负载将请求分布给多个真实的服务器。既能提高效率还有一定的安全性。

用途：如果不采用代理，用户的IP、端口号直接暴露在Internet（尽管地址转换NAT），外部主机依然可以根据IP、端口号来开采主机安全漏洞，所以在企业网，一般都是采用代理服务器访问互联网

正向代理与反向代理最简单的区别：正向代理隐藏的是用户，反向代理隐藏的是服务器

回归正题

由于Ajax请求的ip或端口与发送的ip和端口不一致，就会导致Ajax跨域问题

首先先将前台写的小demo部署到代理服务器上端口为10001

这时我们将前台Ajax的请求地址改为 http://localhost:10001/pro-api/requestBody/aaa

当Ajax请求到http://localhost:10001/pro-api的时候代理服务器会将pro-api之前的 http://localhost:10001/替换成

http://localhost:8080/ ,rewrite ^/pro-api/(.*)$ /$1 break 的意思就是把pro-api删除拼接上后面的地址requestBody/aaa

运行结果：

这样的话就可以解决Ajax跨域问题！

Nginx 解决Ajax跨域请求问题

相关推荐