vue-cli構建的項目中axios的請求方式及跨域處理

vue-cli axios請求方式以及跨域處理

• 安裝axios
  cnpm install axios --save

• 在要使用axios的文件中引入axios

  1.main.js文件 :import axios from 'axois'
    2.要發送請求的文件:import axios from 'axois'

• 在config/index.js文件設置代理

  dev: {     
        proxyTable: {// 輸入/api 讓其去訪問http://localhost:3000/api
          '/api':{   
              target:'http://localhost:3000'//設置調用的接口域名和端口號 ( 設置代理目標)
  
          },
          '/api/*':{
            target:'http://localhost:3000'
          }，
        changeOrigin: true,
         pathRewrite: { //路徑重寫 
                '^/api': '/' //這裏理解成用‘/api’代替target裏面的地址，後面組件中咱們掉接口時直接用api代替 好比我要調用'http://localhost:3002/user/add'，直接寫‘/api/goods/add’便可
            }  
  
        }
        試一下，跨域成功，可是這知識開發環境(dev)中解決了跨域問題，生產環境中正真部署到服務器上若是是非同源仍是存在跨域問題。

axios請求方式

Get請求

// 向具備指定id的用戶發出請求
    axios.get('/user?id=1001')
      .then(function (response) {
        console.log(response.data);
      }).catch(function (error) {
        console.log(error);
      });
    // 也能夠經過 params 對象傳遞參數
    axios.get('/user', {
        params: {
          id: 1001
        }
      }).then(function (response) {//請求成功回調函數
        console.log(response);
      }).catch(function (error) {//請求失敗時的回調函數
        console.log(error);
      });

post請求

axios.post('/user', {
        userId: '10001'  //注意post請求發送參數的方式和get請求方式是有區別的
      }).then(function (response) {
        console.log(response);
      }).catch(function (error) {
        console.log(error);
      });