先後端分離跨域問題解決方案

時間 2019-11-10

標籤後端分離問題解決方案简体版

原文原文鏈接

問題

　　由於最近在學習vue和springboot.用到了先後端分離.前端webpack打包運行的時候會啓動nodejs的服務器佔用8080端口,後端springboot自帶tomcat啓動佔用1111端口(我本身設置的)...致使前端請求的ajax到後臺會產生跨域問題...而後本身試了試發現有2種辦法均可以解決.html

利用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的話彷佛須要額外設置vue

allowCredentials = "true"

具體我也沒試過.由於那個時候我用另一種方法去解決了,不過看api文檔上是說設置成true就能夠解決了..node

這種方式除了請求次數變多之外,我感受還有1個主要問題就是你得設置你容許哪些站點跨域訪問你..你爲了開發方便設置成*...那麼實際上了生產..別人哪一個域名均可以給你發跨域請求..這就很尷尬了..並且註解是寫在代碼裏的.你很難在生產和開發中分別設置不一樣的值.webpack

使用nginx做爲反向代理

因此就有了這種方法...我以爲這是一種比較好的解決辦法..爲何呢? ios

由於使用nginx做爲反向代理的時候前端用戶瀏覽器訪問的是nginx的地址,是一個地址,ajax請求的地址也是這個地址,只是在nginx裏配置了去找後臺的api.因此沒有跨域的問題的.nginx

具體作法:web

首先設置nginx代理全部請求ajax

    server {
        listen       1112;
        server_name  127.0.0.1;

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

好比監聽1112端口,全部請求都轉發到8080的前端nodejs端口.spring

而後再配置後臺數據的接口,好比/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 });