vue跨域proxy的方法和解讀

2021-10-10 12:54:35 字數 783 閱讀 1226

如果不設定跨域,在瀏覽器跨域請求介面的時候,如果不是基本請求(get,post,delete),或者請求時帶了自定義header,比如token所在的authorization,瀏覽器就會先發乙個options請求去試探後台介面,如果確定沒有問題,才會把真正的請求發過去。

如果後台沒有開放options的請求通過,就會出現跨域不通過的問題。

在vue前端設定跨域可以解決這個問題

target就是實際要訪問的介面的網域名稱

changorigin: true,就是設定跨域

/api的意思是,他代替了target中的內容

比如本來在axios中要訪問介面:/admin/user/list

那麼現在在axios中只要寫/api/admin/user/list

但有時會有乙個問題,就是原來後台的介面裡如果本來就有/api的字串,比如本來後台的介面就是http://localhost:5000/api/banner/bannerupload,那麼就要特別處理:

1-可以改變/api的命名,並不見得一定要叫/api,叫/aaa也行

2-將pathrewrite寫成『/api』:』/api』,這樣最終的介面裡就會保留乙個/api,保證介面位址的正確性(/api是乙個正則,從後往前算,比如***/api/apiyyy會變成***/apiyyy,而不是兩個/api,並不會因為/api前面還有乙個/api,就會變成2個,注意他是乙個正則,而不是簡單乙個字串替換的思路)

vue 跨域 proxy跨域處理

跨域就是因為同源策略。為了安全的。這裡的配置跨域本質上就是將本地的位址轉換成伺服器需要的真正期望的位址。本地位址 http localhost 8080 api allin policy getproductinfo 伺服器 devserver 本地 http localhost 8080 alli...

Proxy方式解決跨域

在使用vue cli3.x之後建立vue專案,專案結構發生了較大的改變,不在存在vue.config.js配置檔案,需要手動建立該檔案,如果專案的 和 package.json 同級的 根目錄中存在這個檔案,那麼它會被 vue cli service 自動載入。你也可以使用 package.json...

vue跨域解決方法

vue專案中,前端與後台進行資料請求或者提交的時候,如果後台沒有設定跨域,前端本地除錯 的時候就會報 no access control allow origin header is present on the requested resource.這種跨域錯誤。要想本地正常的除錯,解決的辦法有三...