超级简单！vue解决前后端跨域问题，看完就会

在Vue中解决前后端跨域问题，需要通过配置和设置代理来实现。

1. 配置

在Vue的config目录下的index.js文件中，找到devServer选项，在其中添加如下代码：

devServer: {
    proxy: {
        '/api': {
            target: 'http://localhost:3000',//要代理的后台地址
            ws: true, // 启用WebSocket
            changeOrigin: true, // 是否启用跨域
            pathRewrite: {
                '^/api': '' //若后台地址的接口没有 /api，需要将此处的/api去掉
            }
        }
    }
},

以上代码表示将访问地址中以“/api”开始的所有请求，代理到地址为“http://localhost:3000”的后台服务上。其中，参数解释如下：

• target：代理的后台地址；
• ws：是否启用WebSocket；
• changeOrigin：是否启用跨域；
• pathRewrite：路径重写规则，将“/api”去掉不传递给后台。

1. 设置代理

在Vue的main.js文件中，添加以下代码：

// 设置代理
Vue.prototype.ajaxUrl = '/api';

以上代码表示将Vue的原型中的“ajaxUrl”属性设置为“/api”，即“/api”开头的请求将被代理到后台服务上。

需要注意的是：以上代码只针对Vue的“axios”插件进行设置，若使用其他插件或代码进行请求，则需要对其进行相应的修改。

通过以上配置和设置，即可解决Vue中的前后端跨域问题。