Vue之生成环境跨域和开发环境跨域的区别！

小灰灰 2021-09-19 08:32 279阅读 0赞

### **生产环境必须直接填写api的真实url，然后在服务器端配置跨域：** ###

// 测试环境
    let server_domain_name = "/api";
    
    // 生成环境【iis、apache、其他服务器配置跨域】
    let server_domain_name = "http://127.0.0.1:8099";
    
    
    export default {
        server_register_url: `${server_domain_name}/v1/users/register/index`,
        server_register_query_url: `${server_domain_name}/v1/users/register/check`,
        server_login_url: `${server_domain_name}/v1/users/login/index`,
        server_login_query_url: `${server_domain_name}/v1/users/login/check/account`,
        server_change_password_url: `${server_domain_name}/v1/users/password/change_password`,
        server_reset_password_url: `${server_domain_name}/v1/users/password/reset_password`,
        server_send_email_url: `${server_domain_name}/v1/users/email/send_email`,
    };

## ##

### **开发环境在本地有Vue-cli提供的服务器测试，配置一下跨域即可：** ###

**文件：vue.config.js配置**

module.exports = {
        // vue build生成的默认开头路径,务必注意：这里不能设置/开头
        // 否则导出来的路径全部是“/”开头变成绝对路径了,肯定出问题！
        publicPath: "",
        outputDir: "../www",
        // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
        assetsDir: "./",
    
        devServer: {
            /**
             * 这一块是devServer的配置，可以参考https://webpack.js.org/configuration/dev-server/
             * (可选，根据自己情况来设置)
             */
            // open: true, /*浏览器自动打开页面*/
            host: "127.0.0.1", //本地服务器访问的路径
            port: 8001, //本地服务器访问的端口
    
            /**
             * vue-cli3跨域的全配置！
             */
            proxy: {
                /**
                 * 这里是域名后面需要访问的部分(最原始的跨域方式！),！
                 * 跨域域名https://baike.baidu.com/后面的访问目录！
                 * 在axios路径中写入/article目录下要访问的具体内容路径即可，如果：/article/d4666d640e2e478d283d8c7f.htm即可
                 */
                "/api": {
                    //你要跨域的域名(包含host、端口号,切记：一定要带上http头);
                    //同一个域名只能设置一次跨域，否则重复报错！
                    target: "http://127.0.0.1:8099",
                    ws: true,
                    changeOrigin: true, //是否跨域，设置为true;(必须)
                    pathRewrite: {
                        "^/api": "/", // 设置/article路径重定向为根目录"/";
                    },
                }
            },
        },
    };