關于vue-cli3中配置請求跨域的問題

根據Vue CLI3官方文檔，

需要在vue.config.js文件中配置devServer.proxy選項來解決跨域問題。

1.關于vue.config.js文件

此文件在vue-cli3中不會自動生成，需要手動在項目根目錄下創建。

2.配置devServer.proxy選項

以豆瓣的電影接口為例，進行如下配置。

proxy中的/j/search_subjects代表匹配api的路徑，當命中請求中的url時進入這個代理，進行跨域請求；

target代表想要跨域的目標url；

changeOrigin：true代表允許跨域；

pathRewrite：代表當匹配到上面的路徑/j/search_subjects時需要在target后面拼接什么路徑;

module.exports = {devServer: {proxy: {'/j/search_subjects': {target: 'https://movie.douban.com',changeOrigin: true,pathRewrite: {'^/j/search_subjects': '/j/search_subjects'}}}} }

3.在發起請求時：

this.axios.get("/j/search_subjects?type=movie&tag=%E7%83%AD%E9%97%A8&page_limit=5&page_start=0").then(response => {console.log(responses);})

可以看到，當在此發起get請求時，在上面的配置文件中匹配到了請求url中的“/j/search_subjects”，此時配置就會生效，把這個請求拼接到上面的target后面，請求不同域中遠端的資源。

而此時打開瀏覽器開發者模式，通過network可以看到，

這個請求的路徑顯示為：http://localhost:8080/j/search_subjects?type=movie&tag=%E7%83%AD%E9%97%A8&page_limit=5&page_start=0,

而實際請求的地址卻是：https://movie.douban.com/j/search_subjects?type=movie&tag=%E7%83%AD%E9%97%A8&page_limit=5&page_start=0

這就是實際解決跨域的方式，通過把域名修改來達到跨域的目的，而實際訪問的路徑卻是另一個域名的資源，這就是通過proxy來實現跨域的方法。

總結

以上是生活随笔為你收集整理的关于vue-cli3中配置请求跨域的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。