vue-cli3中,开发模式实现跨域

实现方法

  在vue-cli3中,实现跨域的配置方法有两种。

  1. 一种是在项目中的根目录,即与package.jason文件平行目录
    下创建vue.config.js。然后在文件中配置devServer的proxy属性。具体事项方法请参考链接;vue-cli3代理配置。
    但是,本人配置之后并未实现跨域,配置的api的pathRewrite无法产生效果,组件中使用"/api/*"发送的请求链接是devServer的Ip加上"/api/*"。想不通,如果有大神清楚问题所在,请在评论里指点本人,感激不尽。
  2. 第二种方法在上文的链接中也提过,在package.jason文件中配置proxy对象。
//本人使用的是追书神器的api
"proxy": {
    "/api": "http://api.zhuishushenqi.com"
}

  配置之后,只要是项目中使用了匹配"/api"地址的都会自动替换。例如:

this.$axios
    .get("api/ranking/gender")
    .then(...)

  "api/ranking/gender"会被解析为"http://api.zhuishushenqi.com/ranking/gender"。如果想要深入了解,请访问这个链接。

你可能感兴趣的:(vue-cli3中,开发模式实现跨域)