vue-cli项目开发/生产环境代理实现跨域请求【结合nginx服务器来实现---最简单的方式】【有坑】

参考文档【这个文章是有坑的，下面讲解】：https://www.cnblogs.com/goloving/p/8901189.html

 

关于Vue.js开发环境跨域和生成环境跨域有一个误区会导致你开发环境跨域成功，而生成环境跨域失败！

 

开发环境配置跨域【这个网上一搜大把的资料，很简单】

【务必注意，开发环境配置：这里会把路径开头包含 /api 的全部替换成 http://127.0.0.1:8099/ 】

        /**
         * vue-cli3跨域的全配置！
         */
        proxy: {
            "/api": {
                //你要跨域的域名(包含host、端口号,切记：一定要带上http头);
                //同一个域名只能设置一次跨域，否则重复报错！
                target: "http://127.0.0.1:8099",
                ws: true,
                changeOrigin: true, //是否跨域，设置为true;(必须)
                pathRewrite: {
                    "^/api": "/", // 设置/api路径重定向为根目录"/";
                },
            }
        }

生产环境的配置nginx服务器跨域：【务必注意，nginx服务器配置：这里的/api不是替换http://127.0.0.1:8099，而是重定向为：http://127.0.0.1:8099/api】-----这里就是和开发环境最大的区别----也是我们最容易犯的错误，导致没办法保持开发和生成环境路径一致，切记切记切记

【务必注意，这里的/api不是替换http://127.0.0.1:8099，而是重定向为：http://127.0.0.1:8099/api】

location /api {
     proxy_pass http://127.0.0.1:8099;
}

假设你的api开发路径为：【http://127.0.0.1:8099/api/v1/users/test/index】那一定要注意开发环境配置路径和生成环境nginx服务器配置路径的区别了，否则在【/api】这个地方会出现错误！

 

 

最后的总结：为了保证开发环境和生成环境的代码一致性，我们有必要在两个环境下配置一个统一的跨域路径！【修改一下开发环境的跨域重定向路径即可！】

修改开发环境的跨域配置为【生成环境nginx服务器配置和和上面一样】：

      /**
         * vue-cli3跨域的全配置！
         */
        proxy: {
            "/api": {
                //你要跨域的域名(包含host、端口号,切记：一定要带上http头);
                //同一个域名只能设置一次跨域，否则重复报错！
                target: "http://127.0.0.1:8099",
                ws: true,
                changeOrigin: true, //是否跨域，设置为true;(必须)
                pathRewrite: {
                    // 这里会把当前域名下路径/api开头的地方替换为http://127.0.0.1:8099/api【这样就可以和服务器nginx保持一致的路径】
                    "^/api": "/api", // 设置/api路径重定向为根目录"/api";
                },
            }
        }