vue中的跨域問題

2021-08-20 08:31:54 字數 855 閱讀 2886

vue跨域解決方法

vue專案中,前端與後台進行資料請求或者提交的時候,如果後台沒有設定跨域,前端本地除錯**的時候就會報「請求資源上沒有'access-control-allow-origin'標頭」這種跨域錯誤。

要想本地正常的除錯,解決的辦法有三個:

一、後台更改header

header('access-control-allow-origin:*');//允許所有**訪問 

header('access-control-allow-method:post,get');//允許訪問的方式

methods:  

}) } 

}

三、使用http-proxy-middleware **解決(專案使用vue-cli腳手架搭建)。

例如請求介面的url:「

1.開啟配置檔案config/index.js,在proxytable中添寫如下**:

proxytable:  } }

2.介面統一管理

let host = '/api/'

let urls = key => [key]

}axios.get(urls('login'),function(data))

=>vue-cli3.x

vue.config.js

proxy: }}

vue中解決跨域問題

一般來說,我們會在正式環境中講介面配置到和專案路徑是乙個網域名稱下的。因此,我們沒必要在呼叫介面的時候使用絕對位址,使用相對位址即可。但是開發環境的話,我們本地跑的是localhost 8080位址,當然要使用包含網域名稱的介面位址了。正式環境 介面位址 api 前端頁面位址 開發環境 如上,在請求...

vue中解決跨域問題

1.在vue.config中配置proxy devserver cookiepathrewrite 2.傳送網路請求。以axios.get 為例,在需要傳送網路請求的檔案中匯入axios import axios from axios 也可以在main.js檔案中配置全域性的axios,這樣可以直接...

vue 跨域問題

1 同源策略是瀏覽器的乙個安全功能,在沒有明確的授權情況下不能讀取不同源下的資源 2 只有在協議,埠,網域名稱相同的情況下,才不會出現跨域的現象在config.js檔案下配置乙個 一般是修改proxytable這個配置項的內容 這種跨域一般在開發環境下使用 proxytable target為後端請...