快捷導(dǎo)航

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

更新時(shí)間：2023年11月29日 09:16:57 作者：First浮魚(yú)

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

vue config.js 配置跨域不生效

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

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

axios.defaults.baseURL = '/api'

配置跨域

vue.config.js文件夾要和src在同級(jí)別下

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

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

如果是封裝的請(qǐng)求這個(gè)地址也不要寫(xiě)

要是在不行就把請(qǐng)求頭加上

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

如果還沒(méi)有辦法就讓后端解決

springboot解決方法

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