proxy快速处理跨域

首先vue组件内

<template>
    <div>
        <h2>Proxy代理</h2>
    </div>
</template>

<script>
    import axios from "axios"
    export default {

        created() {
            //这里是自己模拟的带跨域的服务器接口
            axios.get("http://127.0.0.1:3000/user").then((res)=>{

                console.log(res)
            })
        },

    };
</script>

 

然后创建一个vue.config.js文件，配置一下proxy开发环境

//使用时接口数据前面加/api/  处理跨域
module.exports = {
    publicPath: './',
    devServer: {
        open:true,
        proxy: { // 开发环境代理配置
            '/api': {
                target: "http://127.0.0.1:3000",
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    },
}