关于vue-cli3跨域配置笔记

2024年4月30日 185次阅读 来源: zs_staria

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)来读取。

    原文作者：zs_staria
    原文地址: https://segmentfault.com/a/1190000020135522
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞