先后端分离跨域问题解决方案

问题

　　由于最近在学习vue和springboot.用到了先后端分离.前端webpack打包运行的时候会启动nodejs的服务器占用8080端口,后端springboot自带tomcat启动占用1111端口(我本身设置的)...致使前端请求的ajax到后台会产生跨域问题...而后本身试了试发现有2种办法均可以解决.

 

利用SpringMVC @CrossOrigin注解

1 package com.labofjet.system.controller;
2 
3 import org.slf4j.Logger;
4 import org.slf4j.LoggerFactory;
5 
6 //@CrossOrigin(value = "*", allowCredentials = "true")
7 public class BaseController {
8     protected Logger log = LoggerFactory.getLogger(this.getClass());
9 }

CrossOrigin这个注解能够容许ajax跨域请求....可是有个很明显的缺点就是ajax会请求2次,第一次请求类型是options.查看是否是容许发起跨域请求.而后才会发起get呀post呀这样的请求...这就很蛋疼了.至关于须要花费额外的时间再请求上.毕竟请求次数翻倍了.

另外若是要传输cookies的话彷佛须要额外设置

allowCredentials = "true"

具体我也没试过.由于那个时候我用另一种方法去解决了,不过看api文档上是说设置成true就能够解决了..

这种方式除了请求次数变多之外,我感受还有1个主要问题就是你得设置你容许哪些站点跨域访问你..你为了开发方便设置成*...那么实际上了生产..别人哪一个域名均可以给你发跨域请求..这就很尴尬了..并且注解是写在代码里的.你很难在生产和开发中分别设置不一样的值.

 

使用nginx做为反向代理

因此就有了这种方法...我以为这是一种比较好的解决办法..为何呢? 

由于使用nginx做为反向代理的时候前端用户浏览器访问的是nginx的地址,是一个地址,ajax请求的地址也是这个地址,只是在nginx里配置了去找后台的api.因此没有跨域的问题的.

具体作法:

首先设置nginx代理全部请求

    server {
        listen       1112;
        server_name  127.0.0.1;

        location / {
            proxy_pass http://127.0.0.1:8080/;
        }
    }

好比监听1112端口,全部请求都转发到8080的前端nodejs端口.

而后再配置后台数据的接口,好比/api/开头的请求都转发给springboot后台1111端口.

        location /api/ {
            proxy_pass http://127.0.0.1:1111/;
            #index  index.html index.htm;
        }

那么这样作的话须要前端代码里全部的ajax请求都加上api开头前缀...因此须要统一配置下...

 1 const ajaxUrl = env === 'development'
 2     ? '/api'
 3     : env === 'production'
 4         ? 'https://www.url.com'
 5         : 'https://debug.url.com';
 6 
 7 util.ajax = axios.create({
 8     baseURL: ajaxUrl,
 9     timeout: 30000
10 });

我前端ajax用的是axios...能够配置baseURL去控制请求的地址的前缀.因此仍是蛮方便的.

这样就完成了.在用户浏览器看上去先后台数据都是从1112端口发来的,并不知道nginx作了反向代理.全部cookies也都写在1112端口下.因此没有跨域问题也没有cookies的问题.

 

小结

经过nginx或者其余反向代理工具把请求转发给前台和后台服务器能够比较方便的解决先后端分离跨域问题.