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
分享
相关文章
|
5月前
|
在 Vue 中处理组件选项与 Mixin 选项冲突的详细解决方案
【10月更文挑战第18天】通过以上的分析和探讨,相信你对在 Vue 中使用 Mixin 时遇到组件选项与 Mixin 选项冲突的解决方法有了更深入的理解。在实际开发中,要根据具体情况灵活选择合适的解决方案,以确保代码的质量和可维护性。
183 7
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
96 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
前端技术分享:使用Vue.js与Vuex管理状态
【10月更文挑战第1天】前端技术分享:使用Vue.js与Vuex管理状态
65 6
前端解决axios请求的跨域问题【2步完成】
本文介绍如何通过前端配置解决跨域问题,主要针对Vue项目中的`vite.config.js`文件进行修改。作者在联调过程中遇到跨域报错
47 1
Vue.js:现代前端开发的强大框架
【10月更文挑战第11天】Vue.js:现代前端开发的强大框架
145 41
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
316 4
Vue.js:打造高效前端应用的最佳选择
【10月更文挑战第9天】Vue.js:打造高效前端应用的最佳选择
48 2
前端技术分享:Vue.js 动态路由与守卫
【10月更文挑战第1天】前端技术分享:Vue.js 动态路由与守卫

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    8
  • 2
    从前端视角聊聊通义灵码使用经验,如何更好地提升研发效率
    12
  • 3
    巧用通义灵码,提升前端研发效率
    12
  • 4
    详解智能编码在前端研发的创新应用
    5
  • 5
    VSCode AI提效工具,通义灵码前端开发体验
    27
  • 6
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    5
  • 7
    课程预告|前端开发者如何用好通义灵码,这份实战指南请查收
    7
  • 8
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    8
  • 9
    【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
    10
  • 10
    无前端经验如何快速搭建游戏站:使用 windsurf 从零到上线的详细指南
    9
  • AI助理

    你好,我是AI助理

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