1. 程式人生 > >前後端完全分離開發模式Tomcat跨域問題處理

前後端完全分離開發模式Tomcat跨域問題處理

公司新專案實現方案採用前後端完全分離架構,後端採用spring boot框架,前端純HTML5開發
部署會採用同一臺伺服器,但是在實現過程中分工開發出現ajax請求跨域問題
故為解決開發問題發現如下解決方案:
1:chrome修改跨域請求:
參照百度經驗
https://jingyan.baidu.com/article/148a1921c9dbf24d71c3b11f.html
2:tomcat修改配置檔案允許跨域:
該方案為網上搜尋,使用過程中遇到一些疑問,但是不影響使用。
● 開啟tomcat安裝目錄 -> 開啟 conf 目錄 -> 開啟web.xml檔案
● 將如下程式碼複製到web.xml檔案中(我是放在 460左右的位置,不要放在最前面和最後面,一定要放中間)
<filter>
<filter-name>CorsFilter</filter-name>
<filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
<init-param>
<param-name>cors.allowed.origins</param-name>
<param-value>*</param-value>
</init-param>
<init-param>
<param-name>cors.allowed.methods</param-name>
<param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
</init-param>
<init-param>
<param-name>cors.allowed.headers</param-name>
<param-value>*</param-value>
</init-param>
<init-param>
<param-name>cors.exposed.headers</param-name>
<param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
</init-param>
<init-param>
<param-name>cors.support.credentials</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CorsFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>


本機測試發現當在web.xml檔案中新增該配置後重啟tomcat會出現問題,頁面介面不能訪問,
當tomcat正常執行階段,web.xml直接替換可以生效,未知原因,但是可以使用。

相關推薦

前後完全分離開發模式Tomcat問題處理

公司新專案實現方案採用前後端完全分離架構,後端採用spring boot框架,前端純HTML5開發部署會採用同一臺伺服器,但是在實現過程中分工開發出現ajax請求跨域問題故為解決開發問題發現如下解決方案:1:chrome修改跨域請求:參照百度經驗https://jingyan.baidu.com/articl

dotnet core webapi +vue 搭建前後完全分離web架構(一)

cal ade 跨平臺 onf env ans loading p s response 摘要: 架構 服務端采用 dotnet core webapi 前端采用: Vue + router +elementUI+axios 問題 使用前後端完全

Nginx轉發SpringBoot專案配置檔案:nginx.conf(實現前後完全分離

#user nobody; worker_processes 1; error_log D:\\Nginx\\nginx-1.15.6\logs\error.log; ######需要雙斜槓\\n,防止轉譯 #error_log logs/error.log notice; #erro

django 與 vue 的完美結合 實現前後分離開發之後在整合

最近接到一個任務,就是用django後端,前段用vue,做一個普通的簡單系統,我就是一搞後端的,聽到vue也是比較震驚,之前壓根沒接觸過vue.看了vue的一些文件,還有一些專案,先說一下django與vue的完美結合吧!首先是建立一個django專案  django-adm

dotnet core webapi +vue 搭建前後完全分離web架構 一

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!        

Nginx配置反向代理-實現前後完全分離

找到nginx\conf\nginx.conf如下部分: server { listen 80; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; locati

Android使用Retrofit2+OkHttp3+FastJson快速構建前後完全分離專案

Hello,大家好,有一段時間沒更新部落格了,因為最近有點忙。話不多說,切入正題!   之前自己寫的一個Android專案,但是這個專案架構並不是很好,專案各模組的依賴性很強,尤其是資料和介面這塊,所以我想把前後端分離的概念應用到本專案中。   專案後端使用SSM框架開發

vue開發中的處理

前端開發中的跨域處理方式有很多,jsonp、服務端配置、nginx代理等等。本文中這些都不涉及,這裡主要記錄下載vue開發中遇到的跨域問題,以及在使用webpack代理處理跨域遇到的一些問題。 vue開發中遇到跨域問題,最簡單的解決方式就是使用webpack代理(proxyTable)將介面代理

springMVC前後分離開發模式下支持請求

xtend pat OS ping ioe exc auth ava request 1、web.xml中添加cors規則支持(請修改包名) <filter> <filter-name>cors</filter-name>

Vue專案 前後分離模式解決開發環境的問題

在前後端分離的web開發中,我們與後臺聯調時,會遇到跨域的問題。 比如: 開發地址是 localhost:8080,需要訪問 localhost:9000 上的介面。 不同域名之間的訪問,需要跨域才能正確請求。跨域的方法很多,在 Vue-cli 建立的專案中,可以直接利用 Node.js

前後分離開發模式下後質量的保證 —— 單元測試

ats 閱讀 寫代碼 pen 介紹 最大 lose 基礎 每天 概述   在今天, 前後端分離已經是首選的一個開發模式。這對於後端團隊來說其實是一個好消息,減輕任務並且更專註。在測試方面,就更加依賴於單元測試對於API以及後端業務邏輯的較驗。當然單元測試並非在前後端分離流

前後分離開發模式

前端系統的功能分為:UI邏輯和業務邏輯 業務邏輯統計遷移到後端,前端只關注互動 前期約定資料規範,前端人員可以自己mock資料進行自測,達到雙方並行開發,最後聯調提測   優點:後端業務邏輯能支援多個終端,不同的終端業務邏輯本質是一致的,只是使用者體驗的差異,在新的模式

前後分離開發模式下後質量的保證:單元測試

概述 在今天, 前後端分離已經是首選的一個開發模式。這對於後端團隊來說其實是一個好訊息,減輕任務並且更專注。在測試方面,就更加依賴於單元測試對於API以及後端業務邏輯的較驗。當然單元測試並非在前後端分離流行之後才有,它很早就存在,只是鮮有人重視且真的能夠用好它。而在前後端分離開發模式下,特別是兩者交付時間差

徹底解決前端開發前後分離過程中的問題

現在的web工程越來也大,傳統的開發模式已經顯得捉襟見肘了,不僅開發人員在開發過程中很痛苦,後期維護的人員也更痛苦。怎麼解決呢?前後端分離。在前後端開發過程中一直會伴隨我們的問題就是跨域問題,因為這時候前端和後端的程式碼是在不同機器上執行的,兩個地址不在一個域名

解決前後分離後的Cookie問題

-o equals eth success ati $.ajax 設置 ons post 一. 前端Ajax關鍵配置 $.ajax({ type: "post", url: xxx, data: xxx, contentType: ‘applicat

Vue.js 應用 nginx 配置 前後分離模式

一、先在官網下載nginx 軟體,解壓後放在軟體盤中如D盤 將nginx 資料夾拖到編譯器中,開啟conf 資料夾中的 nginx.conf 檔案,找到其中的server {} 配置項,預設35 行。將預設的 server 配置全部用 # 註釋掉,之後再 conf 資料夾中建立資料夾 conf.d ,建

利用Nginx解決前後分離專案中的問題

1. 前端專案利用Nginx配置站點 server { listen 8092 default_server; listen [::]:8092 default_server; root /home/chenpeng/xiahuaida/data/vue; index index.ht

Yii2.0 前後分離 前端ajax呼叫的問題

Yii2.0有自己的一套防止跨域呼叫的機制,網上一搜一大把的解決方式,無非就是: use yii\filters\Cors; public function behaviors() { return ArrayHelper::merge([ [

vue前後分離專案,解決問題

最近公司新開發專案是前後端分離專案,前端用的是vue框架,在和前端除錯介面時存在拒絕跨域訪問403的情況。我這裡主要將解決的過程記錄一下。 什麼是跨域 跨域是瀏覽器的同源策略造成的,只要是域名、埠、協議有一不同,就會被當做是不同的域,之間的請求就被當做跨域操作。 設定同

SpringBoot 前後動靜分離+叢集 遇到的第一個問題:session共享

後臺服務要實現高可用,需要做相關的配置改變,其中比較重要的問題是session共享原專案中,使用了自定義token放在Request Header中來鑑定使用者的身份但前後端分離畢竟是使用了驗證碼,有跨域問題,還是需要cookie攜帶才能解決但是要實現叢集,就必須實現sess