vue.js跨域問題如何解決

本文小編為大家詳細(xì)介紹“vue.js跨域問題如何解決”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“vue.js跨域問題如何解決”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

1.什么是跨域？

對于問題我們要先知道什么是跨域這樣子才可以方便的我們的了解。那么對于跨域簡單的來說就是由于瀏覽器同源策略，一般通過發(fā)送請求URL的協(xié)議、域名、端口三者之間任意一種與我們當(dāng)前的頁面地址不同的都被稱為跨域。如：網(wǎng)絡(luò)協(xié)議不同、端口不同、域名不同、子域名不同、域名和域名對應(yīng)ip等都被稱為跨域。

2.如何解決跨域？

(1)、proxy代理

我們可以在項目中的config或者index.js中添加代碼，代碼如下：

 proxyTable:  {
      '/api': {
        target: 'http://localhost:8083/',//設(shè)置你調(diào)用的接口域名和端口號 別忘了加http
        changeOrigin: true,    //這里true表示實(shí)現(xiàn)跨域
        pathRewrite: {
          '^/api':'/'//這里理解成用‘/api’代替target里面的地址，后面組件中我們掉接口時直接用api代替 比如我要調(diào)用'http://40.00.100.100:3002/user/add'，直接寫‘/api/user/add’即可
        }
      }

在通過 axios 來實(shí)現(xiàn)發(fā)送訪問，在main.js中導(dǎo)入已經(jīng)安裝好的 axios，并掛載到原型上去，代碼如下：

import Axios from 'axios'  //導(dǎo)入axios

//將axios掛載到原型上
Vue.prototype.$axios = Axios;

最后我們再通過this.$axios.get().then()來實(shí)現(xiàn)數(shù)據(jù)請求，代碼如下：

//發(fā)送get請求
show() {
      //用/api來代理'http://localhost:8083'
      this.$axios
        .get("/api/selectall")
        .then(res => {
          this.list = res.data.result;
          // }
        })
        .catch(e => {
          console.log(e);
        });
        },

//發(fā)送post請求
add() {
      this.$axios({
        method: "post",
        url: "/api/saveinfo",
        params: {
          name: this.name //傳遞的參數(shù)
        }
      }).then(res => {
                this.show();
      });
    },

讀到這里，這篇“vue.js跨域問題如何解決”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點(diǎn)還需要大家自己動手實(shí)踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。