前后端分離跨域問題解決方案

問題

　　因為最近在學習vue和springboot.用到了前后端分離.前端webpack打包運行的時候會啟動nodejs的服務器占用8080端口,后端springboot自帶tomcat啟動占用1111端口(我自己設置的)...導致前端請求的ajax到后台會產生跨域問題...然后自己試了試發現有2種辦法都可以解決.

 

利用SpringMVC @CrossOrigin注解

package com.labofjet.system.controller;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

//@CrossOrigin(value = "*", allowCredentials = "true")
public class BaseController {
    protected Logger log = LoggerFactory.getLogger(this.getClass());
}

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開頭前綴...所以需要統一配置下...

const ajaxUrl = env === 'development'
    ? '/api'
    : env === 'production'
        ? 'https://www.url.com'
        : 'https://debug.url.com';

util.ajax = axios.create({
    baseURL: ajaxUrl,
    timeout: 30000
});

我前端ajax用的是axios...可以配置baseURL去控制請求的地址的前綴.所以還是蠻方便的.

這樣就完成了.在用戶瀏覽器看上去前后台數據都是從1112端口發來的,並不知道nginx做了反向代理.所有cookies也都寫在1112端口下.所以沒有跨域問題也沒有cookies的問題.

 

小結

通過nginx或者其他反向代理工具把請求轉發給前台和后台服務器可以比較方便的解決前后端分離跨域問題.