vuecli测试环境配置跨域

最新推荐文章于 2024-08-12 13:22:54 发布

c_七

最新推荐文章于 2024-08-12 13:22:54 发布

阅读量314

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_41597005/article/details/119540154

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了在Vue-cli2和Vue-cli3环境下配置代理以实现跨域的方法。在Vue-cli2中，需要修改build/index.js文件，添加proxyTable；在Vue-cli3中，配置位于vue.config.js，同样使用proxy进行设置，确保'api'与后台项目名称一致以完成跨域请求。

摘要由CSDN通过智能技术生成

1.vue-cli2配置跨域

找到项目里builde文件夹中的index.js文件，在dev中增加proxyTable，实现跨域

module.exports = {
  dev: {
   proxyTable: {
     '/api': {
       target: 服务器地址 IP:端口,
       changeOrigin: true,
       pathRewrite: {
         '^/api': 'api'    
       }
     }   
   }  
  }
}

代码里的api代指后台项目名称，保持一致，方可使用跨域

2.vue/cli3配置跨域

在vue.config.js文件配置代理跨域

module.exports = {
   devServer:{
     proxy:{
       "/api":{
         target: 服务器地址, IP:端口
         changeOrigin: true, // 跨域设置true
         pathRewrite: {
           "^/api":"api"
         }
       }
     }  
   }
}

代码里的api代指后台项目名称，保持一致，方可使用跨域