快捷導(dǎo)航

proxy代理不生效以及vue?config.js不生效解決方法

更新時間：2023年11月29日 09:16:57 作者：First浮魚

在開發(fā)Vue項(xiàng)目過程中,使用了Proxy代理進(jìn)行數(shù)據(jù)劫持,但是在實(shí)際運(yùn)行過程中發(fā)現(xiàn)代理并沒有生效,也就是說數(shù)據(jù)并沒有被劫持,這篇文章主要給大家介紹了關(guān)于proxy代理不生效以及vue?config.js不生效解決方法的相關(guān)資料,需要的朋友可以參考下

vue config.js 配置跨域不生效

axios默認(rèn)請求接口就是localhost，所以這里需要更改 axios設(shè)置的默認(rèn)請求設(shè)置

在 main.js 文件里，設(shè)置

axios.defaults.baseURL = '/api'

配置跨域

vue.config.js文件夾要和src在同級別下

module.exports = {
    configureWebpack: {
        devtool: 'source-map'
    },
 
    productionSourceMap: false, // 生產(chǎn)環(huán)境是否要生成 sourceMap
    publicPath: './', //  部署應(yīng)用包時的基本 URL
    outputDir: 'dist', //   打包時輸出的文件目錄
    assetsDir: 'assets', //   放置靜態(tài)文件夾目錄
    devServer: {
        host: 'localhost',
        port: 8081, //開發(fā)環(huán)境運(yùn)行時的端口
        https: false, //是否啟用HTTPS協(xié)議
        open: true, //項(xiàng)目運(yùn)行成功后是否直接打開瀏覽器
        hot: true, //是否開啟熱加載
        allowedHosts: 'all',
        proxy: { //服務(wù)器代理
            '/api': {
                target: "http://localhost:8080/", // 實(shí)際跨域請求的API地址
                secure: false, // https請求則使用true
                ws: true,
                changeOrigin: true, // 跨域
                // 請求地址重寫  http://front-end/api/login ? http://api-url/login
                pathRewrite: {
                    '^/api': '/',
                }
            },
        }, // dev環(huán)境下，webpack-dev-server 相關(guān)配置
    }
}

在這里面 /api 就相當(dāng)于'http://localhost:8080/'

所以接下來接口需要添加的的url參數(shù)不需要再寫接口的域名

如果是封裝的請求這個地址也不要寫

要是在不行就把請求頭加上

    headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "application/json;charset=utf-8"
    }

如果還沒有辦法就讓后端解決

springboot解決方法

    @Override
    protected void addCorsMappings(CorsRegistry registry) {
        //設(shè)置允許跨域的路徑
        registry.addMapping("/**")
                //設(shè)置允許跨域請求的域名
                .allowedOrigins("*")
                //是否允許證書 不再默認(rèn)開啟
                .allowCredentials(true)
                //設(shè)置允許的方法
                .allowedMethods("*")
                //跨域允許時間
                .maxAge(3600);
    }