vue--本地开发(npm run dev)情况下解决跨域问题

最新推荐文章于 2024-05-14 05:48:28 发布

原创最新推荐文章于 2024-05-14 05:48:28 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

前端专栏收录该内容

26 篇文章

订阅专栏

本文介绍在Vue项目中解决跨域问题的方法，通过配置proxyTable和axios，实现从本地环境请求后端接口。步骤包括：配置代理，设置axios请求前缀，并调整请求路径。

我的vue版本是2.9，开发过程中，从本地环境（localhost:80080）请求后端接口时，会有跨域问题，解决方法是：
1、在config文件夹下的index.js文件中，找到proxyTable，添加如下代码：

'/api':{
        target: "https://test.dev.com", // 后端接口地址
        changeOrigin:true, // 是否允许跨域
        pathRewrite:{
            '^/api': ''
        }
    }

2、在src文件夹下的main.js添加如下代码：

Vue.prototype.$axios = axios
// 设置请求url前缀
axios.defaults.baseURL = '/api'
axios.defaults.headers.post['Content-Type'] = 'application/json'

3、修改axios请求路径：
加入请求的地址是：https://test.dev.com/user/add_user，
那么现在的请求地址只需要写：/user/add_user

      this.$axios.get('/user/add_user')
        .then(res => {
          console.log(res )
        })
        .catch(error => {
          console.log(error)
        })