如何在vue-cli打包上线是正确配置url

本文介绍了一种在开发过程中解决跨域问题的方法,通过配置代理和使用axios实现前后端分离项目的跨域请求。在开发环境中,利用代理重写路径,避免跨域问题;生产环境下,服务器需设置跨域许可。

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

config>index.js

 proxyTable: {
        '/api': {
          target: 'http://bfr.n13.com.cn',// 请换成你的地址
            changeOrigin: true,
            pathRewrite: {
              '^/api': '/api'
            }
        }
    }

main.js

const host = process.env.NODE_ENV === "development" ? "" : "http://bfr.n13.com.cn";
const instance = axios.create({
    baseURL: host
})
Vue.prototype.axios = instance;

index.vue

this.axios.get('/api/gettopimg.aspx')
  .then(res => {
  console.log( res.data)
})

然后在服务器端把getClass.aspx的请求文件放在一个api的文件夹里面,这样开发的时候不需要服务器设置跨域了,生产的时候,服务器端设置一下允许跨域就好了,用cors跨域。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值