因為最近在學習vue和springboot.用到了前後端分離.前端webpack打包執行的時候會啟動nodejs的伺服器占用8080埠,後端springboot自帶tomcat啟動占用1111埠(我自己設定的)...導致前端請求的ajax到後台會產生跨域問題...然後自己試了試發現有2種辦法都可以解決.
1 package com.labofjet.system.controller;crossorigin這個註解可以允許ajax跨域請求....但是有個很明顯的缺點就是ajax會請求2次,第一次請求型別是options.檢視是不是允許發起跨域請求.然後才會發起get呀post呀這樣的請求...這就很蛋疼了.相當於需要花費額外的時間再請求上.畢竟請求次數翻倍了.2 3 import org.slf4j.logger;
4 import org.slf4j.logge***ctory;
5 6 //@crossorigin(value = "*", allowcredentials = "true")
7 public class basecontroller
另外如果要傳輸cookies的話似乎需要額外設定
allowcredentials = "true"具體我也沒試過.因為那個時候我用另外一種方法去解決了,不過看api文件上是說設定成true就可以解決了..
這種方式除了請求次數變多以外,我感覺還有1個主要問題就是你得設定你允許哪些站點跨域訪問你..你為了開發方便設定成*...那麼實際上了生產..別人哪個網域名稱都可以給你發跨域請求..這就很尷尬了..而且註解是寫在**裡的.你很難在生產和開發中分別設定不同的值.
所以就有了這種方法...我覺得這是一種比較好的解決辦法..為什麼呢?
因為使用nginx作為反向**的時候前端使用者瀏覽器訪問的是nginx的位址,是乙個位址,ajax請求的位址也是這個位址,只是在nginx裡配置了去找後台的api.所以沒有跨域的問題的.
具體做法:
首先設定nginx**所有請求
server比如監聽1112埠,所有請求都**到8080的前端nodejs埠.}
然後再配置後台資料的介面,比如/api/開頭的請求都**給springboot後台1111埠.
location /api/那麼這樣做的話需要前端**裡所有的ajax請求都加上api開頭字首...所以需要統一配置下...
1 const ajaxurl = env === 'development'我前端ajax用的是axios...可以配置baseurl去控制請求的位址的字首.所以還是蠻方便的.2 ? '/api'
3 : env === 'production'
4 ? ''
5 : '';
6 7 util.ajax = axios.create();
這樣就完成了.在使用者瀏覽器看上去前後臺資料都是從1112埠發來的,並不知道nginx做了反向**.所有cookies也都寫在1112埠下.所以沒有跨域問題也沒有cookies的問題.
通過nginx或者其他反向**工具把請求**給前台和後台伺服器可以比較方便的解決前後端分離跨域問
前後端分離跨域問題解決方案
其實呢跨域問題主要原因就是瀏覽器的同源策略導致的，所以呢想辦法解決這個問題就好了。主要就是在請求的時候加上以下 吧 access control allow origin access control allow headers x requested with access control all...
前後端分離與跨域的解決方案
前後端分離與跨域的解決方案 cors的原理 vue中axios傳送options預檢請求的原因及如何通過 ps access control allow origin 該字段是必須的，表示接受任意網域名稱的請求，還可以指定網域名稱。access control allow credentials 該...
python前後端分離專案跨域問題解決方案
跨域資源共享 cors 是前後端分離專案很常見的問題 cors全稱cross origin resource sharing，意為跨域資源共享。當乙個資源去訪問另乙個不同網域名稱或者同網域名稱不同埠的資源時，就會發出跨域請求。如果此時另乙個資源不允許其進行跨域資源訪問，那麼訪問的那個資源就會遇到跨域...