Vue中跨域問題解決方案1

javascript小白菜發表於2020-05-16
Vue跨域

我們需要配置代理。代理可以解決的原因：因為客戶端請求服務端的資料是存在跨域問題的，而伺服器和伺服器之間可以相互請求資料，是沒有跨域的概念（如果伺服器沒有設定禁止跨域的許可權問題），也就是說，我們可以配置一個代理的伺服器可以請求另一個伺服器中的資料，然後把請求出來的資料返回到我們的代理伺服器中，代理伺服器再返回資料給我們的客戶端，這樣我們就可以實現跨域訪問資料。

報錯如下：

 

 解決方案如下：

1. 在專案根目錄新建vue.config.js檔案

2. 配置代理

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:4000', //對應自己的介面
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

3. 在main.js檔案，配置一下axios.defaults.baseURL = '/api' 這樣就可以保證動態的匹配生產和開發環境的定義字首了，程式碼如下：

/*
入口JS
*/
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'

Vue.prototype.$axios = axios
axios.defaults.baseURL = '/api'  //關鍵程式碼
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

4. 在元件中使用axios請求資料

<template>
 
</template>

<script>
    import FooterGuide from './components/FooterGuide/FooterGuide.vue'
    export default {
        created() {
            const url = '/index_category'
            this.$axios.get(url).then(res => {
                console.log(res)
            })
        },
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">

</style>

5. 重新啟動專案之後，已經解決了跨域問題。切記...

相關文章