vue跨域解決方法

2021-08-14 10:34:06 字數 1681 閱讀 1043

vue專案中,前端與後台進行資料請求或者提交的時候,如果後台沒有設定跨域,前端本地除錯**的時候就會報「no 'access-control-allow-origin' header is present on the requested resource.」 這種跨域錯誤。

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

一、後台更改header

1

2

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

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

這樣就可以跨域請求資料了。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

methods:

})

}

}

通過這種方法也可以解決跨域的問題。

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

例如請求的url:「

1、開啟config/index.js,在proxytable中添寫如下**:

1

2

3

4

5

6

7

8

9

proxytable:

}

}

2、使用axios請求資料時直接使用「/api」:

1

2

3

4

getdata () )

通過這中方法去解決跨域,打包部署時還按這種方法會出問題。解決方法如下:

1

2

3

4

5

let serverurl = '/api/'  //本地除錯時

// let serverurl = ''  //打包部署上線時

export default

除錯時定義乙個serverurl來替換我們的「/api」,最後打包時,只需要將「替換這個「/api」就可以了

使用說明:

vue跨域問題解決方法

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

vue跨域 前端後端各種解決方法

在後端使用spring boot。spring boot跨域非常簡單,只需書寫以下 即可。configuration public class customcorsconfiguration bean public corsfilter corsfilter spring boot應用用nginx反...

跨域報錯解決方法

當你報這個錯誤的時候,就是沒有處理好跨域。跨域是什麼 簡單來說就是你要請求url的協議 網域名稱 埠有乙個和你的頁面url不同就是跨域 例如我這裡 我是http localhost 8080然後要訪問的資料 解決方法 中介軟體 跨域 res.writehead 設定允許那些源可以跨域請求,代表所有源...