Nginx解决跨域访问难题:轻松实现跨域资源共享!

点击下方关注我,然后右上角点击..."设为星标",就能第一时间收到更新推送啦~~~

跨域资源共享(CORS,Cross-Origin Resource Sharing)是一种网络浏览器的安全功能,它限制了一个源(域、协议和端口的三元组)的web页面向另一个源请求资源。这可以防止恶意内容执行跨站请求伪造(CSRF)攻击。然而,在开发过程中,特别是在前后端分离的应用中,我们通常需要允许跨域请求。

1

跨域问题演示

1、什么是跨域访问

如果2个服务器节点的协议,域名,端口有一个不同,那么这2台服务器之间互相访问就会出现跨域访问的问题,跨域限制的根本原因是浏览器的限制,浏览器为了安全从而限制跨域访问。

2、跨域示例说明

演示一:

假设Tomcat2服务器部署了一个hello.json文件,里面是一个json格式的数据,用它来模拟跨域访问问题。

hello.json内容如下:

go 复制代码
{
"hello":"world"
}

Tomcat1服务器上的index.jsp通过一段js代码要获取到Tomcat2服务器上的hello.json内容,并通过alert输出key=hello的值world。

在Tomcat1服务器的ROOT下上传jquery-2.1.1.min.js文件,在index.jsp文件的head中增加如下代码:

go 复制代码
<script src="jquery-2.1.1.min.js"></script>
<script>
$(function(){
$.get("http://192.168.1.10:8080/hello.json",{},function(result){
alert(result.hello);
});            
});
</script>

如下图:

通过浏览器输入http://192.168.1.9:8080,提示"Failed to load http://192.168.1.10:8080/hello.json: No 'Access-Control-Allow-Origin' ",说明出现了跨域访问问题

演示二

如果我们在Tomcat1的index.jsp里通过Nginx代理获取Tomcat2服务器的hello.json文件,是否可行呢?

  1. 修改/data/program/tomcat8/webapps/ROOT目录下的index.jsp文件,把IP地址改为Nginx代理的地址

    go 复制代码
    <script src="jquery-2.1.1.min.js"></script>
    <script>
            $(function(){
                    $.get("http://192.168.1.8/hello.json",{},function(result){
                            alert(result.hello);
                    });            
            });
    </script>
  2. 修改/data/program/nginx/conf/userconf目录下的proxy.conf配置,注释掉对192.168.1.9:8080的反向代理,为了演示,让其只代理192.168.1.10:8080。

    go 复制代码
    upstream tomcat8 {
       #server 192.168.1.9:8080;
        server 192.168.1.10:8080;
    }
    
    server{
        listen 80;
        server_name localhostdomin;
        location / {
            proxy_pass http://tomcat8;
        }
        location ~* .+\.(js|css|png|svg|ico|jpg)$ {
            root static_resource;
            expires 1d;
        }
    }
  3. 重启Nginx服务器,通过浏览器输入http://192.168.1.9:8080,提示"Failed to load http://192.168.1.8/hello.json: No 'Access-Control-Allow-Origin'",说明依然存在跨域访问问题。

2

Nginx解决跨域请求问题

通过nginx的配置解决以上出现的跨域问题

再次修改/data/program/nginx/conf/userconf目录下的proxy.conf配置,通过add_header设置解决跨域访问问题

go 复制代码
upstream tomcat8 {
   #server 192.168.1.9:8080;
    server 192.168.1.10:8080;
}

server{
    listen 80;
    server_name localhostdomin;
    location / {
        proxy_pass http://tomcat8;
        add_header 'Access-Control-Allow-Origin' '*';                
        add_header 'Access-Control-Allow-Methods' 'GET,POST,DELETE';
        add_header 'Access-Control-Allow-Header' 'Content-Type,*';
    }
    location ~* .+\.(js|css|png|svg|ico|jpg)$ {
        root static_resource;
        expires 1d;
    }
}

如下图:

保存配置,并重启Nginx服务器

通过浏览器输入http://192.168.1.9:8080,可以弹出world的值,如下:

因此,说明通过nginx的配置,我们解决了上面的跨域访问问题,可以正常获取到Tomcat2服务器上的json资源。

注:上面的网页没有样式,是因为之前我们把Tomcat里面的静态资源挪走导致的。

相关推荐
AIbase202416 分钟前
国内MCP服务平台推荐!aibase.cn上线MCP服务器集合平台
运维·服务器·人工智能
艾立泰智能包装26 分钟前
电商分拣的“效率密码”:艾立泰轻量化托盘引领自动化流水线革新
运维·自动化
cpsvps_net29 分钟前
Windows内存泄漏自动化
运维·自动化
你不知道我是谁?1 小时前
负载均衡--常见负载均衡算法
运维·负载均衡
会又不会1 小时前
Jenkins-Publish HTML reports插件
运维·jenkins
烟雨书信2 小时前
Docker文件操作、数据卷、挂载
运维·docker·容器
IT成长日记2 小时前
【Docker基础】Docker数据卷管理:docker volume prune及其参数详解
运维·docker·容器·volume·prune
这儿有一堆花2 小时前
Docker编译环境搭建与开发实战指南
运维·docker·容器
LuckyLay2 小时前
Compose 高级用法详解——AI教你学Docker
运维·docker·容器
Uluoyu2 小时前
redisSearch docker安装
运维·redis·docker·容器