vue不同环境使用axios跨域,前端解决方案

简介: vue不同环境使用axios跨域,前端解决方案
  1. development 环境
    只需要在config->index.js dev模块中添加proxyTable 即可
    在这里插入图片描述

    proxyTable: {
            //当请求中以/api 开头时,对将/api请求路径进行代理
          '/api': {
            //接口域名
            target: 'http://localhost:3000/',
            // 如果接口跨域,需要进行这个参数配置,为true的话,请求的header将会设置为匹配目标服务器的规则(Access-Control-Allow-Origin)而跨域设置后端是在response中设置
            changeOrigin: true,
            //重写/api  为 /
            pathRewrite: {
              '^/api': '/'
            }
          }
        },
        全部意义: 当发送localhost:8080/api/test 时,将请求代理到http://localhost:3000/test   因为重写了/api 为 /。
        如果不重写,去掉pathReWrite配置。当发送localhost:8080/api/test 时,将请求代理到http://localhost:3000/api/test
    AI 代码解读

    其实请求接口 也可以不用写 /api 来请求,可以直接配置‘/’ 因为后端真实接口为 ‘/’ 开头

    proxyTable: {
      '/': {
        target: 'http://localhost:3000/', 
        changeOrigin: true,
      }
    },
    全部意义: 当发送localhost:8080/test 时,将请求代理到http://localhost:3000/test 
    AI 代码解读

    真实axios 请求情况

    goInfo(item){
      let playListUrl = `/playlist/detail?id=${item.id}`;
      axios.get(playListUrl).then((response) => {
        xxxxx
    },
    AI 代码解读

    **问题:那为什么要写 /api 呢?因为生产环境和开发
    不一样,开发环境一般都是采用nginx+tomcat / 或者单纯用nginx。利用nginx 做代理,可以解决跨域问题。而location / 模块映射 和 location /api 模块 映射应该要区分开来。一个专门做静态文件访问,一个专门做请求代理**

  2. product 环境

    #xi-music项目  注意当前域名
    server {
       // xxxxx 这部分省略
    
        location / {
            #当请求路径以根路径开头时,去/usr/lcoal下找静态资源,默认index.html
            #示例:/xi    映射为   /usr/local/xi 
            root   /usr/local;
            index  index.html index.htm;
           # 尝试读取文件 $uri代表  当前请求子路径, $uri/  代表请求的目录
           #如果前两项都没有匹配,那么重新发送请求/xi-music
           #解决刷新404问题
            try_files  $uri $uri/ /xi-music;
        }
    
          #添加访问目录为/api的代理配置,使以“/api”开头的地址都转到“http://127.0.0.1:3000”上
        location /api {
               rewrite  ^/api/(.*)$ /$1 break;
               # 将/api下的子路径  拼接到http://localhost:3000下
               # /api/song     http://localhost:3000/song
               proxy_pass   http://127.0.0.1:3000;
        }
        
    }
    AI 代码解读
目录
打赏
0
0
0
0
5
分享
相关文章
Vue与TypeScript:如何实现更强大的前端开发
Vue.js 以其简洁的语法和灵活的架构在前端开发中广受欢迎,而 TypeScript 作为一种静态类型语言,为 JavaScript 提供了强大的类型系统和编译时检查。将 Vue.js 与 TypeScript 结合使用,不仅可以提升代码的可维护性和可扩展性,还能减少运行时错误,提高开发效率。本文将介绍如何在 Vue.js 项目中使用 TypeScript,并通过一些代码示例展示其强大功能。
119 22
制造业ERP源码,工厂ERP管理系统,前端框架:Vue,后端框架:SpringBoot
这是一套基于SpringBoot+Vue技术栈开发的ERP企业管理系统,采用Java语言与vscode工具。系统涵盖采购/销售、出入库、生产、品质管理等功能,整合客户与供应商数据,支持在线协同和业务全流程管控。同时提供主数据管理、权限控制、工作流审批、报表自定义及打印、在线报表开发和自定义表单功能,助力企业实现高效自动化管理,并通过UniAPP实现移动端支持,满足多场景应用需求。
227 1
Vue与React两大前端框架的主要差异点
以上就是Vue和React的主要差异点,希望对你有所帮助。在选择使用哪一个框架时,需要根据项目的具体需求和团队的技术栈来决定。
261 83
Vue 性能革命:揭秘前端优化的终极技巧;Vue优化技巧,解决Vue项目卡顿问题
Vue在处理少量数据和有限dom的情况下技术已经非常成熟了,但现在随着AI时代的到来,海量数据场景会越来越多,Vue优化技巧也是必备技能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下,仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库,直接编写HTML文件实现页面功能,展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具,但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器,提供了一种高效、轻量的开发思路。
130 10
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
160 0
Vue 表情包输入组件实现代码及详细开发流程解析
这是一篇关于 Vue 表情包输入组件的使用方法与封装指南的文章。通过安装依赖、全局注册和局部使用,可以快速集成表情包功能到 Vue 项目中。文章还详细介绍了组件的封装实现、高级配置(如自定义表情列表、主题定制、动画效果和懒加载)以及完整集成示例。开发者可根据需求扩展功能,例如 GIF 搜索或自定义表情上传,提升用户体验。资源链接提供进一步学习材料。
74 1
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件,包括基础与高级示例。组件支持分段配置(如颜色、文本)、动画效果及超出进度提示等功能。同时提供了完整的代码实现,支持全局注册,并提出了优化建议,如主题支持、响应式设计等,帮助开发者更灵活地集成和定制进度条组件。资源链接已提供,适合前端开发者参考学习。
137 17
如何高效实现 vue 文件批量下载及相关操作技巧
在Vue项目中,实现文件批量下载是常见需求。例如文档管理系统或图片库应用中,用户可能需要一次性下载多个文件。本文介绍了三种技术方案:1) 使用`file-saver`和`jszip`插件在前端打包文件为ZIP并下载;2) 借助后端接口完成文件压缩与传输;3) 使用`StreamSaver`解决大文件下载问题。同时,通过在线教育平台的实例详细说明了前后端的具体实现步骤,帮助开发者根据项目需求选择合适方案。
91 0

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问