Vue 代理解决跨域

Vue 代理解决跨域

vue-cli 提供了代理服务器功能用于解决跨域问题。

方法一：

在 vue.config.js 中进行以下配置，以后axios的网络请求地址更换为vue服务的地址，默认 http://localhost:8080 。

module.exports = defineConfig({
  // 开启代理服务器
  devServer: {
    proxy: 'http://wthrcdn.etouch.cn:80',
  }
})

优点：这种方式简单，
缺点：但是不能配置多个代理，不能灵活控制请求是否走代理。
工作方式：若按上述方式配置，vue-cli会先检查自己是否有资源，有则提供，没有则转发给服务器。

 

方法二：

module.exports = {
    devServer: {
        proxy: {
            '/api1': { // 匹配所有以'/api1' 开头的请求路径
                target: 'http://localhost:5000', // 代理目标的基础路径
                changeOrigin: true,              // 控制请求头中host值。如果为true，在请求服务器时不表明自己是代理服务器
                pathRewrite: {'^/api1':''}       // 路径重写
            },
            '/api2': { // 匹配所有以'/api2' 开头的请求路径
                target: 'http://localhost:5001',
                changeOrigin: true,
                pathRewrite: {'^/api2':''}
            },
        }
    }
}

/*
    changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
    changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
    changeOrigin默认值为true
*/

优点：可以配置多个代理，能灵活控制是否走代理

缺点：配置稍繁琐，请求资源时要加前缀

 

axios 网络请求

axios.get(地址)
    .then(
		function(response){},  // 成功时的回调函数
		function(err){}        // 失败时的回调函数
    )

axios.post(地址, {key1:value1, key2:value2})
    .then(
		function(response){},  // 成功时的回调函数
		function(err){}        // 失败时的回调函数
    )

在 axios 请求函数的内部，this对象已经发生了改变，所以需要用一个其他变量保存Vue对象中的this。

<div id="app">
    <input type="button" id="get" value="get" @click="getRequest">
    <input type="button" id="post" value="post" @click="postRequest">

    <p>{{ joke }}</p>
</div>

</body>
<script>
var app = new Vue({
    el: "#app",
    data: {
        joke: "笑话"
    },
    methods: {
        getRequest: function() {
            var that = this;    // 保存 Vue 对象中的指针，用于在 axios 中访问
            axios.get("https://autumnfish.cn/api/joke/list?num=1")
                .then(function (response) {
                        that.joke = response.data.jokes;
                        console.log(response.data);
                    }, function (err) {
                        console.log(err);
                    }
                )
        },
        postRequest: function() {
            var that = this;
            axios.post("https://autumnfish.cn/api/user/reg", {"username": "Tom"})
                .then(function (response) {
                        console.log(response.data);
                    }, function (err) {
                        console.log(err);
                    }
                )
        }
    }
});
</script>