vue解决跨域问题

跨域问题在开发中，是一个常见的问题。解决方案可以在前端处理也可以在后端解决，本教程为在前端处理。

本教程讲解的为vue3脚手架搭建的项目遇到的跨域问题，其他版本也同理。

1.在项目根目录新建vue.config.js文件

vue.config.js

module.exports = {

    devServer: {

        // 设置代理

        proxy: {

            "/api": {

                target: "http://m.kugou.com/", // 访问数据的计算机域名

                ws: true, // 是否启用websockets

                changOrigin: true, //开启代理

                pathRewrite: {

                    '^/api': '/'//这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://m.kugou.com/rank/info'，直接写‘/api/rank/info’即可 

                }

            }

        }

    }

};

2.本项目使用axios来请求，所以需要在main.js中引入该插件和配置

main.js

import axios from 'axios';

Vue.prototype.$axios = axios;

import QS from 'qs'

Vue.prototype.qs = QS;

axios.defaults.timeout = 5000;                        //响应时间

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';        //配置请求头

3.页面中使用

demo.vue

created() {

    axios.get("/api/test/jeecgDemo/list").then(data => {

      console.log(data);

    });

  }