vue 跨域配置实例

最新推荐文章于 2024-08-12 13:22:54 发布

zyf13671493506

最新推荐文章于 2024-08-12 13:22:54 发布

阅读量845

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/zyf13671493506/article/details/109355886

版权

前端专栏收录该内容

213 篇文章 0 订阅

订阅专栏

vue-cli3配置与跨域处理

转载：https://segmentfault.com/a/1190000020102366

官方地址：https://cli.vuejs.org/zh/config/#vue-config-js

跨域处理

前后端分离开发时，不得不面对跨域问题。对于跨域，可以用两种办法进行处理。
1.安装nginx，将后端和前端都代理带nginx上。
2.在vue-cli中配置proxy，将API请求代理到API服务器上。设置devServer.proxy

    devServer: {
        open: true, //是否自动弹出浏览器页面
        host: "localhost", 
        port: '8081',
        https: false,
        hotOnly: false, 
        proxy: {
            '/api': {
                target: 'http://localhost:5000', //API服务器的地址
                ws: true,  //代理websockets
                changeOrigin: true, // 虚拟的站点需要更管origin
                pathRewrite: {   //重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc'
                    '^/api': ''
                }
            }
        },
    }

所以若是后端的API为'/aaa/ccc'，我们需要在发请求时将路径设置为'/api/aaa/ccc',这样我们的请求才会被proxy代理到。