vue-cli3,开发项目解决跨域问题

发表于 |

实现方法

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

  1. 一种是在项目中的根目录，即与package.jason文件平行目录下创建vue.config.js。然后在文件中配置devServer的proxy属性。具体事项方法请参考链接；vue-cli3代理配置。

    1
    2
    3
    4
    5
    module.exports ={
    	devsever: {
    		proxy: '代理地址'
    	}
    }

  2. 第二种方法在上文的链接中也提过，在package.jason文件中配置proxy对象。

    1
    2
    3
    4
    //本人使用的是追书神器的api
    "proxy": {
    	"/ranking": "http://api.zhuishushenqi.com"
    }

   配置之后，只要是项目中使用了匹配”/ranking”地址的都会自动替换。例如：

1
2
3
this.$axios
	.get("/ranking/gender")
	.then(...)

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