vue通过前端配置解决跨域问题proxyTable

本文详细介绍如何在Vue项目中配置跨域请求,通过修改项目根目录下的index.js文件,设置代理表来实现跨域请求的转发,同时提醒在main.js中避免重复设置请求前缀。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vue是一个独立的前端框架,在开发过程中需要解决一下跨域问题, 当然了,在后端也是可以解决跨域问题的, 但是如果后端只提供接口,并不能解决跨域的话, 那么这时候就需要在前端解决跨域了 ,
首先找到vue前端的配置文件, 默认是在项目根目录下/config/中的index.js文件中
找到module.exports中的dev

dev: {
        env: require('./dev.env'),
        port: 8070,  //端口号
        autoOpenBrowser: false, //配置启动成功后是否自动打开浏览器
        assetsSubDirectory: 'static', 
        assetsPublicPath: '/',
        staticPath: '/static/',
        // 这里是解决跨域的配置, 意为将请求全部转为target值的地址进行请求
        proxyTable: {
            "/api": {  // 注意这里的斜线不可缺少
                target: "http://192.168.1.200",
                changeOrigin: true,
                pathRewrite: {
                    "^/api": "" // 通过pathRewrite重写地址,将"/api"转为"/"
                }
            }
        },
        cssSourceMap: false
    }

在实际使用中, 通过如下方式调用即可,注意使用时,url前面要添加一个前缀/api, 这里是对应着proxyTable中的"/api"

在这里插入图片描述
注意项目中main.js中不能对请求的前缀进行设置, 有些项目中是使用后端解决跨域的, 这时为了方便, 在前端就会统一配置请求的ip和端口号, 以便在开发时不用每个请求都加上地址前缀, 这里要注意 , 如果是从后端解决跨域改为前端解决跨域, main.js中设置请求地址前缀的部分一定要注释掉, 否则请求地址会一直使用main.js中配置的地址前缀, 无法映射到前端跨域配置文件中的设置, 注意 注意 千万注意!

至此, vue前端解决跨域就完成了, 是不是很简单

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值