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跨域访问问题

Nginx 解决Ajax跨域请求问题

解决如下

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

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

  • 正向代理

    • 首先先要搭建一台代理服务器比如Ngnix服务器

    • 客户端发送请求到代理服务器

    • 代理服务器去请求服务器

    • 服务器返回数据给代理服务器

    • 代理服务器再将数据返回给客户端

      • 举一个简单的例子:

        你去找你爸爸借钱 你爸爸没有 你爸爸去找你妈妈借钱 你妈妈把钱给爸爸 爸爸在把钱给你 (但是你妈妈并不知道是你借的钱)

        • 用途:当你用浏览器访问国外的网站时,被block(拒绝)时,你可以在国外搭建一个代理服务器,这样就可以正常访问了(只是举一个列子)
  • 反向代理

    • 客户端发送请求到服务器 (客户端其实是访问的反向代理服务器,但是客户端不知道)
    • 反向代理服务器发送请求到真正的服务器
    • 真正的服务器返回数据给反向代理服务器
    • 反向代理服务器将数据返回给客户端

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

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

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

回归正题

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

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

Nginx 解决Ajax跨域请求问题

这时我们将前台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

    运行结果:

Nginx 解决Ajax跨域请求问题

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

上一篇:Linux常用命令


下一篇:Spring Cloud / Alibaba 微服务架构实战aaa