新手学vuecli3跨域问题的坑

新手学vue
看了两天vue的视频 今天开始上手做项目 不得不感慨一下 理论和实践差距很大。
遇到的第一个大坑 就是实际请求服务器接口的时候出现的跨域问题。
新手学vuecli3跨域问题的坑_第1张图片
解决方法:
在网上查了一些资料,给出的解决方法是在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': '/'
                }
            }
        },
    }
}

保存以后 再次请求接口 发现跨域问题没有啦 但是另一个让人迷惑的事情来了
新手学vuecli3跨域问题的坑_第2张图片
请求地址变成了本地的
又在网上搜了相关资料才明白 这个方法是通过把域名修改来达到跨域的目的,而实际访问的路径却是另一个域名的资源,这就是通过proxy来实现跨域的方法。
附上对应网址:
https://blog.csdn.net/ep_little_prince/article/details/101826018

你可能感兴趣的:(vue,js,web)