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

2022-07-02 01:36:13 字數 1177 閱讀 3773

其實呢跨域問題主要原因就是瀏覽器的同源策略導致的,所以呢想辦法解決這個問題就好了。

主要就是在請求的時候加上以下**吧

access-control-allow-origin *;

access-control-allow-headers x-requested-with;

access-control-allow-methods *;

這些東西網上一收一大堆,我就不多說啦,時間緊迫

通常來說在請求後端時都會加上乙個url字首,這裡我就定為最常用的/api了,下邊示例都已這個為主 

在開發階段可以通過webpack的配置來解決跨域這個問題,在專案更目錄下建立vue.config.json,具體配置如下:

module.exports =}}

}}

首先安裝nginx,這裡就不多說了,網上很多安裝示例

解釋一下這裡的 proxy_pass 後邊的位址是在 upstream模組中定義的:

upstream fvs-web-server

這種方法就比價簡單粗暴了,通過nginx的**機制直接**即可,但是在**的時候最後一定要加上乙個 / ,這樣nginx會把/api 後邊的位址直接新增在後邊而不會再攜帶api了 

當然這樣的方式好像並不怎麼直觀所以我本人是更加偏向於後邊這種方式的

這種方式就有點類似於webpack的解決方式了,只是平台不同了而已

這樣的寫的話就不需要在proxy_pass**的路徑後邊寫/了,因為在上一句的rewrite中已經吧url中api以後的路徑單獨取出來,並且重寫了。

還有一點要注意的是 location 後邊的路徑類似於正則但也不是完全是正則,而rewrite後邊的一定是正則,不要搞混了。我就是在寫rewrite裡邊正則的時候直接把location後邊匹配規則給抄了下來,整整兩個小時啊,找不到問題,後來出去冷靜了一下才看到(主要是那個"~",正則裡邊沒有這個的)

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

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

前後端分離與跨域的解決方案

前後端分離與跨域的解決方案 cors的原理 vue中axios傳送options預檢請求的原因及如何通過 ps access control allow origin 該字段是必須的,表示接受任意網域名稱的請求,還可以指定網域名稱。access control allow credentials 該...

python前後端分離專案跨域問題解決方案

跨域資源共享 cors 是前後端分離專案很常見的問題 cors全稱cross origin resource sharing,意為跨域資源共享。當乙個資源去訪問另乙個不同網域名稱或者同網域名稱不同埠的資源時,就會發出跨域請求。如果此時另乙個資源不允許其進行跨域資源訪問,那麼訪問的那個資源就會遇到跨域...