問題

　　因為最近在學(xué)習(xí)vue和springboot.用到了前后端分離.前端webpack打包運行的時候會啟動nodejs的服務(wù)器占用8080端口,后端springboot自帶tomcat啟動占用1111端口(我自己設(shè)置的)...導(dǎo)致前端請求的ajax到后臺會產(chǎn)生跨域問題...然后自己試了試發(fā)現(xiàn)有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.查看是不是允許發(fā)起跨域請求.然后才會發(fā)起get呀post呀這樣的請求...這就很蛋疼了.相當(dāng)于需要花費額外的時間再請求上.畢竟請求次數(shù)翻倍了.

另外如果要傳輸cookies的話似乎需要額外設(shè)置

allowCredentials = "true"

具體我也沒試過.因為那個時候我用另外一種方法去解決了,不過看api文檔上是說設(shè)置成true就可以解決了..

這種方式除了請求次數(shù)變多以外,我感覺還有1個主要問題就是你得設(shè)置你允許哪些站點跨域訪問你..你為了開發(fā)方便設(shè)置成*...那么實際上了生產(chǎn)..別人哪個域名都可以給你發(fā)跨域請求..這就很尷尬了..而且注解是寫在代碼里的.你很難在生產(chǎn)和開發(fā)中分別設(shè)置不同的值.

?

使用nginx作為反向代理

所以就有了這種方法...我覺得這是一種比較好的解決辦法..為什么呢??

因為使用nginx作為反向代理的時候前端用戶瀏覽器訪問的是nginx的地址,是一個地址,ajax請求的地址也是這個地址,只是在nginx里配置了去找后臺的api.所以沒有跨域的問題的.

具體做法:

首先設(shè)置nginx代理所有請求

server {listen 1112;server_name 127.0.0.1;location / {proxy_pass http://127.0.0.1:8080/;}}

比如監(jiān)聽1112端口,所有請求都轉(zhuǎn)發(fā)到8080的前端nodejs端口.

然后再配置后臺數(shù)據(jù)的接口,比如/api/開頭的請求都轉(zhuǎn)發(fā)給springboot后臺1111端口.

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

那么這樣做的話需要前端代碼里所有的ajax請求都加上api開頭前綴...所以需要統(tǒng)一配置下...

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去控制請求的地址的前綴.所以還是蠻方便的.

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

?

小結(jié)

通過nginx或者其他反向代理工具把請求轉(zhuǎn)發(fā)給前臺和后臺服務(wù)器可以比較方便的解決前后端分離跨域問

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的前后端分离跨域问题解决方案的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。