在vue.js中怎么解決跨域問題？解決跨域的方法！

在新的框架學(xué)習(xí)中我們需要學(xué)的不僅僅是框架還要學(xué)習(xí)他的方法，那么就拿vue這個框架來說，在當(dāng)下也是比價流行使用的，輕量級的特點而且容易掌握。那么今天我們就來說說有關(guān)于“在vue.js中怎么解決跨域問題？”這個問題吧！

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

(1)、proxy代理

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

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

在通過 axios 來實現(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()?來實現(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();
      });
    },

這就是小編收集的相關(guān)資料，當(dāng)然如果你有不一樣的想法也可以和大家一起分享探討學(xué)習(xí)，希望小編的分享對你有所幫助更多相關(guān)的 vue資料我們都可以 W3cschool中進(jìn)行搜索相關(guān)內(nèi)容學(xué)習(xí)和觀看視頻。