1.实现axios(如果懂请跳过)

  1. 安装

    npm install --save axios vue-axios
    
  2. main.js添加

    import Vue from 'vue'
    import axios from 'axios'
    import VueAxios from 'vue-axios'
    
    Vue.use(VueAxios, axios);
    
  3. 在组件中使用

    Vue.axios.get(api).then((response) => {
      console.log(response.data)
    })
    
    this.axios.get(api).then((response) => {
      console.log(response.data)
    })
    
    this.$http.get(api).then((response) => {
      console.log(response.data)
    })
    




2. 跨域请求

协议(http/https)、域名(0.0.0.0)、端口号(8080)任意一个不同都是跨域。前端解决跨域可以通过代理来实现,就是把请求拦截下来并改成我们需要的url。

2.1 跨域例子

以下是基于vue-cli脚手架下创建的项目。实现的跨域请求例子如下:

  • https://www.vue-js.com/api/v1/topics (vue自带的api)
  • https://www.baidu.com (百度)
  • http://192.168.1.5:8080/project/getProByCId/1 (自己后端项目接口)

  1. 在vue组件点击按钮发送跨域请求:
<template>
    <div>
        <h1>hello</h1>
        <div>
            <button @click="askurl">跨域请求</button>
            <button @click="askbaidu">百度请求</button>
            <button @click="askpro">实验项目请求</button>
        </div>
    </div>
</template>
  1. 在vue组件中发送axios请求:
<script>
export default {
    name: "Hello",
    methods: {
        //跨域请求
        askurl(){
            this.axios.get('/api/v1/topics').then(res=>{
                console.log(res.data);
            })
        },//askurl

        //请求百度
        askbaidu(){
            this.axios.get('/baidu').then(res=>{
                console.log(res.data);
            })
        },//askbaidu

        //请求项目
        askpro(){
            this.axios.get('/report/project/getProByCId/1').then(res=>{
                console.log(res.data);
            })
        }//askpro
    }
}
</script>
  1. index.js中proxyTable中写代理,如果有vue.config.js,写的proxy里也是一样的。
proxyTable: {
    
    //代理1
    '/api': {    // 遇到'/api'的请求拦截下来,将跨域改成target的url
        target: 'https://www.vue-js.com/api',
        changeOrigin: true,  //是否跨域,肯定true
        pathRewrite: {   //重写请求中的/api为空
               '^/api': ''
        }
    },
      
     //代理2
    '/baidu': {     // 遇到'/baidu'的请求拦截下来,将跨域改成target的url
        target: 'https://www.baidu.com/',
        changeOrigin: true,
        pathRewrite: {
             	'^/baidu': '' //重写请求中的/baidu为空
     	},
    },
        
	//代理3
     '/report': { 	// 遇到'/report'的请求拦截下来,将跨域改成target的url
         target: 'http://192.168.1.5:8080',
         changeOrigin: true,
         pathRewrite: {
               '^/report': ''
    	},
     },
         //...其他代理

},
  1. 记得重启重启重启项目!!!!



2.2 举例说明

  • 需要的请求:https://www.vue-js.com/api/v1/topics
  • 实际url请求:http://localhost:8080/api/v1/topics
  • 代理目标:/api
  • axios请求:/api/v1/topics
  • 代理target:https://www.vue-js.com/api

代理简易过程:

  1. axios是通过默认域名’http://localhost:8080‘发送的请求,所以发出请求URL为:
    ’http://localhost:8080‘(域名)+ ’/api/v1/topics‘(请求) = ’https://www.vue-js.com/api/v1/topics‘

  2. 这时候代理发现请求中带有’/api‘,并拦截下来,并把域名’http://localhost:8080’替换成target里的域名’https://www.vue-js.com/api’,于是替换后请求URL就会变成:
    ‘https://www.vue-js.com/api/api/v1/topics’
    (这里需要注意:是把域名改成target,不包括拦截的请求中的‘/api’)

  3. 于是我们需要重写拦截下来的请求中的‘/api’(就是上面那个请求‘https://www.vue-js.com/api/api/v1/topics’的第二个‘api’),把它去掉。于是就有了pathRewrite: { ‘^/api’: ‘’}。这样重写后请求URL就会变成:
    ‘https://www.vue-js.com/api/v1/topics’

Logo

前往低代码交流专区

更多推荐