vue跨域問題解決方法

2021-08-20 02:42:37 字數 1727 閱讀 3969

vue跨域解決方法

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」就可以了。

註明出處

跨域問題解決方法

工作中總是遇到跨域問題,但是常常遇到了也不知道這是跨域導致的問題,或者知道了也還是不知道怎麼解決。於是,就找了各方資料作了以下分享。首先,跨域的發生只是因為瀏覽器攔截了xhr的跨域請求,不讓我們拿到後台資料的是瀏覽器而不是後台。細分下來,三個原因就是 一 瀏覽器的限制 二 這是個xhr請求 三 跨域...

AJAX跨域問題解決方法

呼叫方解決跨域的方法只有一種,那就是隱藏跨域。何為隱藏跨域?隱藏跨域的核心思路是通過反向 隱藏跨域以欺騙瀏覽器 什麼是反向 反向 是指通過中間伺服器使得訪問同乙個網域名稱的兩個不同url最終會去往兩個不同的伺服器 一 反向 nginx配置 在之前的被呼叫方解決跨域中,訪問的請求是絕對位址,瀏覽器可以...

Vue專案跨域問題解決

本人目前接觸的是基於vue cli elementui的前端專案,在前後端聯調時遇到過跨域問題。網上找答案,然後解決問題。這裡分享一下我用的方法。跨域產生的原因就是瀏覽器基於同源策略對跨域訪問進行了限制。瀏覽器限制跨域,但是服務端不限制,因此可以讓本地服務端 跨域訪問。在vue的工程目錄下的conf...