什么是跨域访问

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

跨域示例说明

  • 验证一

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

hello.json内容如下:

{
"hello":"world"
}

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

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

<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>

如下图:

Nginx 解决跨域访问问题演示_服务器

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

Nginx 解决跨域访问问题演示_服务器_02

  • 验证二

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

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

    <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。

    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'”,说明依然存在跨域访问问题。

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

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

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 解决跨域访问问题演示_服务器_03

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

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

Nginx 解决跨域访问问题演示_服务器_04

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

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