乐趣区

关于vuecli3跨域配置笔记

vue-cli3 跨域配置:
在 vue-resource 的数据请求中,一般我们会将请求方式 GET/POST 修改为 jsonp 的请求方式就可以实现跨域。
但是对于只支持 GET/POST 两种请求方式的 api,修改 jsonp,就会出错。需要进行跨域的配置。
(1)
在文件根目录下,创建 vue.config.js 配置文件,具体配置如下:
module.exports={

// 将 baseUrl:'/api', 改为 baseUrl:'/'
baseUrl:'/',
devServer:{
    '/api':{
        target:'http://apis.juhe.cn/',
        changeOrigin:true,
        ws:true,
        pathRewrite:{'^/api':''}
         
    }
}}

(2)
在文件根目录下, 创建.env.development 用作开发环境变量设置。
在.env.development 文件下设置变量 VUE_APP_BASE_API=/api 即可将 devServer 的 proxy 重写的 url 赋值给 VUE_APP_BASE_API

(3)
读取配置的变量,通过 process.env.VUE_APP_XX(process.env.VUE_APP_BASE_API) 来读取。

退出移动版