vue跨域请求(举例子细说）

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>

2. 在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>

3. 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': ''
    	},
     },
         //...其他代理

},

4. 记得重启重启重启项目！！！！

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’