当前位置: > Linux服务器 > nginx >

Nginx处理前后端分离的js跨域问题

时间:2018-06-06 17:41来源:linux.it.net.cn 作者:IT

跨域和同源定义:

        跨域是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com 页面去请求 www.google.com 的资源。但是一般情况下不能这么做,它是由浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制。跨域的严格一点的定义是:只要 协议,域名,端口有任何一个的不同,就被当作是跨域    

        所谓同源是指,域名,协议,端口均相同。这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据。

 

 

跨域问题会出现如下情况:

QQ截图20130613230631

 

利用Nginx反向代理可以解决这一问题。

举一个前后端分离的实例:

将静态文件都存放于 /static/ 文件夹下,nginx具体配置如下:


 
 
  1. server {  
  2.    listen    4000;  
  3.    server_name www.aabbccdd.com;  
  4.    charset utf-8;  
  5.    index /static/index.html;//配置首页  
  6.    
  7.    #这边可使用正则表达式,拦截动态数据的请求/sellingJson.html,从而解决跨域问题  
  8.    location = /sellingJson.html {  
  9.      proxy_pass http://192.168.100.17:8090/vueHelpSellingcar.html;  
  10.    }  
  11.    
  12.    #配置Nginx动静分离,定义的静态页面直接从static读取。  
  13.    location ~ .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css)$   
  14.    {   
  15.    root /static/;  
  16.    #expires定义用户浏览器缓存的时间为7天,如果静态页面不常更新,可以设置更长,这样可以   节省带宽和缓解服务器的压力  
  17.    expires   7d;   
  18.    }    
  19.  }  

 

后端对数据的处理:


 
 
  1. @RequestMapping("/vueHelpSellingcar.html")   
  2. public void vueHelpSellingcar(HttpServletRequest request,HttpServletResponse response) {    
  3.      //若干操作后,返回json数据     
  4.      JSONObject resultJson = new JSONObject();      
  5.      resultJson.put("carbrandList", carbrandList);     
  6.      resultJson.put("provinceList", provinceList);      
  7.      //进行序列化,返回值前端    
  8.      byte[] json =resultJson.toString().getBytes("utf-8");       
  9.      response.setHeader("Content-type", "text/html;charset=UTF-8");       
  10.      response.getOutputStream().write(json);     
  11.  }   

前端对数据的处理和展示(使用Axios或者Ajax获取请求结果,本文使用Axios):


 
 
  1. //html模块   
  2.   <div v-if="carbrandList.length" class="char_contain">   
  3.    <p v-for="brand in carbrandList" id="  {{brand.brand_id}}">{{brand.brand_name}}</p>   
  4.   </div>   
  5.     
  6. //js模块 页面加载后,自动去获取动态资源   
  7.   let v={};   
  8.   $(function() {   
  9.     axios.get('http://test.csx365.com:4000/sellingJson.html')   
  10.       .then(function(data){   
  11.         //定义一个vue对象,方便模板渲染   
  12.         v =Object.assign(v, new Vue({   
  13.         el : '.char_contain', //绑定事件名   
  14.         data : {   
  15.            carbrandList : data.data.carbrandList, //数据流   
  16.          }   
  17.         }));    
  18.        })   
  19.        .catch(function(err){   
  20.          console.log(err);   
  21.        });   
  22.     });  

这样就使用Nginx解决了前后端分离的javascript的跨域问题了。




(责任编辑:IT)
------分隔线----------------------------
栏目列表
推荐内容