Nginx 解决Ajax跨域请求问题

本文主要是介绍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跨域请求问题的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！