vue-cli3.0跨域（前后端设置方法）

1.后端设置跨域方法

服务器端指定请求头中的Access-Control-Allow-Origin字段即可。

2.前端设置跨域的方法

注意：如果后端规定了post发送数据的格式为Form，在请求里加个header，'Content-Type':'application/x-www-form-urlencoded' （一般不需要设）

例如：

const service = axios.create({
    //baseURL: "http://192.168.2.201:80", // api的base_url
    baseURL: "", // api的base_url
    headers:{
        'Content-Type':'application/x-www-form-urlencoded'
    },
    timeout: 5000 // 请求超时时间
})

复制代码

在vue项目中常用的是proxyTable

vue-2.0打开config下面的index.js，找到proxyTable

vue-3.0打开vue.config.js.找到proxy
a.添加如下代码：

'/api': { //替换代理地址名称
target: 'http://xxx.xxx.com/', //代理地址，即要跨域请求的地址
changeOrigin: true, //可否跨域
pathRewrite: {
'^/api': '' //重写接口，去掉/api
}
}；

如下图：

配置完之后需要重启下项目 npm run dev

重启之后，就可以调用，实现跨域了

b.具体使用：

在需要调用的接口前加上“/api”即可

如下图：

c.

注意：如果请求有设置baseURL的话一定要把baseURL设置为空

如下图：

为了方便打包后去除'/api',建议把'/api'设成全局，在main.js中添加

Vue.prototype.api = process.env.NODE_ENV === 'production' ? '' : '/api'

调用接口的时候的url就可以写成api + '接口地址'

转载于:https://juejin.im/post/5c91e7fa6fb9a070fc6237bc