在vue项目中axios的使用以及 请求接口跨域问题

1：安装axios

npm安装

npm install axios

或者直接引用

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

2：vue项目中页面中引用axios

<script>
import axios from 'axios';
export default {
    data() {
        return {
            username: "",
            password: "",
        };
    },
    methods: {
        handleSubmit() {
            axios.post('http：//XXXXXXXX.com/XXX', {
                account: this.username,
                password: this.password
            })
                .then(response => {
                    console.log(response.data);
                    alert('请求成功，返回信息：' + JSON.stringify(response.data));
                })
                .catch(error => {
                    console.error(error);
                    alert('请求失败，错误信息：' + error.message);
                });
        },
    },
};
</script>

3：这样写完之后请求接口会出现跨域问题

就要去弄一下代理
找到config文件，将以下代码放在和resolve同级的位子

server: {
      proxy: {
        // 配置所有以 '/api' 开头的请求路径
        '/api': {
          target: 'https://XXXX.com',  // 代理目标的端口路径
          changeOrigin: true, // 是否更改配置代理服务器的端口号
          rewrite: path => path.replace(/^\/api/, '') // 重写路径，去除 /api 前缀
        }
      },
    },

然后再去把请求路径换一下
axios.post(‘http：//XXXXXXXX.com/cccc’, {
换成
axios.post(‘/api/cccc’, {
就可以成功了