VUE-axios前端配置跨域

在使用vue进行前端项目开发时，通常会遇到请求后端接口出现跨域的问题，原因通常为客户端无法直接请求服务端接口从而实现获取数据，但是服务端对服务端可以实现获取，因此我们需要实现一个vue自己的小型代理服务来替我们完成请求操作，具体方法如下

 

1.  main.js中引入 axios 

import axios from 'axios'
Vue.prototype.$http = axios

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

配置如下内容

module.exports = {
    devServer: {
        proxy: {
            "/api": { //自定义
                target: "http://ip:port/", //这里可以写实际接口的地址加端口
                changeOrigin: true, 
                ws: true,
                pathRewrite: {
                    "^/api": "/"//自定义内容，需要与上面内容一致
                }
            }
        }
    }
}

 

3. 请求部分

this.$http.post(`/api/server/`)

直接写/api/实际接口后面的地址就OK

 

经过测试可实现前端配置跨域的操作。