新手学vue
看了两天vue的视频 今天开始上手做项目 不得不感慨一下 理论和实践差距很大。
遇到的第一个大坑 就是实际请求服务器接口的时候出现的跨域问题。
解决方法:
在网上查了一些资料,给出的解决方法是在config文件夹下的index.js里面配置一下
但是我打开我的文件目录 瞬间懵逼了,没有这个文件夹~~
然后略微思考,感觉应该是vue版本的问题 后来查找vuecli3的相关问题,找到了解决办法,
在package.json同级新建一个vue.config.js
然后在里面写如下代码
module.exports = {
outputDir: 'dist', //build输出目录
assetsDir: 'assets', //静态资源目录(js, css, img)
lintOnSave: false, //是否开启eslint
devServer: {
open: true, //是否自动弹出浏览器页面
host: "localhost",
port: '8080',
https: false,
hotOnly: false,
proxy: {
'/api': {
target: '', //API服务器的地址
ws: true, //代理websockets
changeOrigin: true, // 虚拟的站点需要更管origin
pathRewrite: { //重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc'
'^/api': '/'
}
}
},
}
}
保存以后 再次请求接口 发现跨域问题没有啦 但是另一个让人迷惑的事情来了
请求地址变成了本地的
又在网上搜了相关资料才明白 这个方法是通过把域名修改来达到跨域的目的,而实际访问的路径却是另一个域名的资源,这就是通过proxy来实现跨域的方法。
附上对应网址:
https://blog.csdn.net/ep_little_prince/article/details/101826018