vue-08-axios-get-post-跨域

1, 安裝

cnpm install axios --save

2, 在main.js中引入

import Axios from 'axios'

// 掛在在Vue上
Vue.prototype.$axios=Axios;

3, get請求: 

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        newsData: []
      }
    },
    // 組件建立時執行
    created() {
      // 直接參數方式
      this.$axios("http://www.wwtliu.com/sxtstu/news/juhenews.php?type=junshi&count=30")
        .then(res => {
          console.log(res);
        })
        .catch(err => {
          console.log(err)
        });

      // 間接參數方式：
      this.$axios("http://www.wwtliu.com/sxtstu/news/juhenews.php", {
        params: {
          type: 'junshi',
          count: 30
        }
      }).then(res => {
        this.newsData = res.data.result.data
        console.log(this.newsData)
      }).catch(err => {
        console.log(err)
      })

    }
  }
</script>

頁面渲染

<div class="hello">

    <div>
      <ul>
        <div>
          <li v-for="news in newsData">
            <img :src="news.thumbnail_pic_s" alt="">
            <p> {{ news.title }}</p>
          </li>
        </div>
      </ul>
    </div>

  </div>

4, post 請求: 

1), axios 接受的post請求參數的格式 是 form-data 格式

?name=iwen&passwd=1234

2), x-from-urlencoded:

{name: "iwen", passwd: "abc"}

使用第三方庫 qs 進行轉換

<script>

  import qs from "qs"

  export default {
    name: "PostRequest",
    data() {
      return {
        postList: []
      }
    },
    create() {
      // 引入第三方庫， 轉變 x-form-urlencoded 格式 爲 form 格式
      this.$axios.post("www.wwtliu.com/sxtstu/blueberrypai/login.php", qs.stringify({
          user_id: "wenbronk",
          password: "1234"
        })
      ).then(res => {
        console.log(res)
      }).catch(err => {
        console.log(err)
      })
    }
  }
</script>

5, 全局的 axios的默認值

在main.js中進行全局配置

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
// 引入
import Axios from 'axios'

Vue.config.productionTip = false

// 掛在在Vue上
Vue.prototype.$axios=Axios;

// 在以後不須要 寫 網址， uri了
Axios.defaults.baseURL = 'https://api.example.com';
// https 認證
Axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// 設置heads， 能夠不須要qs設置 
Axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';


/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

6, 攔截器: 

在 thne 或者 catch 以前, 作攔截處理操做

在main.js中進行攔截

// 添加請求攔截器
Axios.interceptors.request.use(function (config) {
    // 在發送請求以前作些什麼
    return config;
  }, function (error) {
    // 對請求錯誤作些什麼
    return Promise.reject(error);
  });

// 添加響應攔截器
Axios.interceptors.response.use(function (response) {
    // 對響應數據作點什麼
    return response;
  }, function (error) {
    // 對響應錯誤作點什麼
    return Promise.reject(error);
  });

進行參數校驗或者 後端response校驗 

 7, 跨域解決方案: 

在config的 index.js 中添加: 

    // 處理跨域
    proxyTable: {
      "/api": {
        target: "http://localhost:8080",
        changeOrigin: true,
        pathRewrite: {
          "^/api": ""
        }
      }
    },

而後在main.js中添加host 代理

import Vue from 'vue'
import App from './App'
// 引入
import Axios from 'axios'

Vue.config.productionTip = false

// 掛在在Vue上
Vue.prototype.$axios=Axios;

// 解決跨域:
Vue.prototype.HOST = '/api'

而後 在 post請求中的地址, 改寫爲

 this.HOST + 「/login.html」

 但只能在測試階段使用, 正式環境中須要後端解決 !!!!

 

post 請求能夠使用請求攔截器的方式進行攔截

import router from './router'
import Axios from 'axios'
import qs from "qs"

Vue.config.productionTip = false

// 添加 axios
Vue.prototype.$axios = Axios
Axios.defaults.baseURL = 'https://www.wwtliu.com';
Axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

// 添加 post 請求攔截器
Axios.interceptors.request.use(function (config) {
  if (config.method == "post") {
    config.data = qs.stringify(config.data)
  }
  return config;
}, function (error) {
  // 對請求錯誤作些什麼
  return Promise.reject(error);
});

// 添加響應攔截器
Axios.interceptors.response.use(function (response) {

  return response;
}, function (error) {
  // 對響應錯誤作點什麼
  return Promise.reject(error);
});

springboot 解決跨域方案: 

@Configuration
public class WebConfig extends WebMvcConfigurationSupport {

    @Bean
    public FilterRegistrationBean corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        // 設置你要容許的網站域名，若是全容許則設爲 *
        config.addAllowedOrigin("*");
        // 若是要限制 HEADER 或 METHOD 請自行更改
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");
        source.registerCorsConfiguration("/**", config);
        FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
        // 這個順序很重要哦，爲避免麻煩請設置在最前
        bean.setOrder(0);
        return bean;
    }

}

 前端: 

import Axios from 'axios'
// Vue.prototype.$axios=Axios;
// 在以後不須要 寫 網址， uri了
Vue.prototype.baseURL = 'http://localhost:8000/';
// Axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

const axiosIns = Axios.create({
  baseURL: Vue.prototype.baseURL,
  timeout: 10000,
  withCredentials: true, // 跨域
  headers: {
    "Content-Type": "application/x-www-form-urlencoded",
    "Access-Control-Allow-Origin": "*",
  }
});
Vue.prototype.$axios=axiosIns;