在vue.js中怎么解決跨域問(wèn)題？解決跨域的方法！

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

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

(1)、proxy代理

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

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

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

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

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

最后我們?cè)偻ㄟ^(guò)?this.$axios.get().then()?來(lái)實(shí)現(xiàn)數(shù)據(jù)請(qǐng)求，代碼如下：

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

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

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