首页 > 其他分享 >vue解决跨域

vue解决跨域

时间:2023-06-12 17:11:36浏览次数:996  
标签:axios 跨域 api js vue 解决 response

vue-cli2

main.js

import axios from 'axios'
Vue.prototype.$axios = axios
axios.defaults.baseURL = '/api'
Vue.config.productionTip = false

.vue

 var This = this
      var url = '/group1/M00/00/21/MejEvGOX_zOAL2kiAAAAUhB5Iqg138.txt?token=895acb60323e38e6d85b5c9a82466b61&ts=1670934451'
      axios.get(url, {responseType: 'blob'})
        .then((response) => {
          console.log('跨域,设置返回类型', response)
          This.handleExport(response.data)
        })

config/index.js

 proxyTable: {
      '/api':
        {
        target: 'https://tyzfbj.com',
        // http://172.16.33.27:5566/getHelp
        secure: false,
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''//表示需要rewrite重写路径  
          }
      }
    },

 

 

vue-cli3解决跨域

1.修改vue.config.js

根目录创建 vue.config.js

 

module.exports = {
    devServer: {
      open: true, //是否自动弹出浏览器页面
      host: "localhost", 
      port: 8080,
      // https: true,
      hotOnly: false, 
      proxy: {
          '/api': {
              target: 'http://59.110.231.93:9001',  //https://tyzfbj.com
              changeOrigin: true, // 虚拟的站点需要更管origin
              pathRewrite: {  
                //   '^/api': '' 无效
                '^/api': '/api'
              }
          }
      },
  },
}

2.使用

main.js增加

axios.defaults.baseURL = 'http://localhost:8080/api'

 

var url = '/api/group1/M00/00/21/MejEvGOX_zOAL2kiAAAAUhB5Iqg138.txt?token=895acb60323e38e6d85b5c9a82466b61&ts=1670934451'
      this.axios.get(url, {responseType: 'blob'})
        .then((response) => {
          console.log('跨域,设置返回类型', response)
        })

 

标签:axios,跨域,api,js,vue,解决,response
From: https://www.cnblogs.com/ljingjing/p/16978631.html

相关文章

  • vue之elementui使用, vuex使用, Router使用, localstorage和sessionstorage,和cookie
    目录一、elementui使用下载插件vue界的ui库二、vuex的使用1.概念2.何时使用?3、使用步骤:三、Router使用1简单使用2组件中实现页面跳转3路由跳转时,可以使用对象4this.router的一些方法四、多级路由五、路由守卫和两种工作模式路由守卫路由器的两种工作模式六、localstorage和se......
  • Axios 代理跨域后后端无法接收Session问题
    将一个MVC项目重构为一个前后端分离项目,前端使用了react+axios+vite...。在前后端分离项目中,通常都会使用代理来解决跨域问题,vite需要在vite.config.js文件中配置代理:exportdefaultdefineConfig({server:{//代理配置proxy:{//请求前缀......
  • 前端vue可以左右滚动的切换的tabs tabs选项卡 滑动动画效果 自动宽度
    前端vue可以左右滚动的切换的tabstabs选项卡滑动动画效果自动宽度, 下载完整代码请访问https://ext.dcloud.net.cn/plugin?id=13003效果图如下:     ####使用方法```使用方法swiperTabList:["2023-06-10","2023-06-11","2023-06-12","2023-06-13","20......
  • vue实现简单的鼠标拖拽横向滚动 和 鼠标滚轮横向滚动
    一.鼠标拖拽滚动以下代码项目中直接使用即可,此种方法是通过鼠标拖拽进行滚动,滑动滚轮无效果。当然快捷键,shift+鼠标滚轮可以控制横向滚动,对用户来说体验不友好。<divclass="tab-listid="nav"><divclass="tab-item"v-for="(item,index)inlist":key=""></div></d......
  • Linux RDP 会话中无法打开VSCode 解决办法
    githubissue:VSCode"andstill"won'topeninaLinuxxrdpsessionWorkaround-LinuxRDP会话中无法打开VSCode解决办法ThistimearoundIresolvedtheissuebynarrowingthefollowingHackintwosteps:Copythesystemfile'libxcb.so.1.1.0'......
  • Vue 生命周期钩子指南
    你将学到什么了解所有vuejs钩子、vuex(一种状态管理工具)和状态选项,将为您提供构建功能性软件产品所需的灵活性。本文将向您介绍vuejs钩子,它还将让您基本了解如何以及何时使用这些钩子。但是,如果您愿意了解有关上述相关主题的更多信息,这里有一个链接可以为您提供指导。状态选项......
  • 基于vue+flask+sql的公司销售采购信息服务系统
    一、介绍本项目基于Flask+Vue+Mysql的后台服务系统,主要针对某一公司日常后台操作而开发的一系列功能,包含用户管理,客户管理,采购管理,销售管理,库存管理,财务管理,权限管理,数据管理等功能。二、软件架构软件后端使用Flask,数据库使用mysql数据库,前端主要使用vue_ui2 三、使......
  • uniapp vue3 setup + 云开发开发个人小程序
    最近使用uniappvue3setup+云开发开发了个人小程序,设计使用figma软件,看下成品截图吧(可以直接微信搜索【识光】小程序体验,或者最底部有码可以直接扫) ......
  • 振弦采集仪在岩土工程安全监测使用的解决方案
    振弦采集仪在岩土工程安全监测使用的解决方案随着现代科技的不断发展,振弦采集仪越来越多地运用在岩土工程安全监测中。振弦采集仪的主要作用是通过采集地下土层振动数据,评估土层的力学特性及其完整性,同时监测土层的变形和变化,从而提高工程的施工质量和安全性。 振弦采集仪在......
  • 视频直播网站源码,vue tabs标签页 点击才加载
    视频直播网站源码,vuetabs标签页点击才加载tabs标签页,默认加载显示第1个tab; <el-tabsv-model="tTab"type="card"style="height:100%"@tab-click="tTabClick">  <el-tab-panelabel="Jupyter"name="Jupyter">   ......