首页 > 其他分享 >vue跨域简易版

vue跨域简易版

时间:2022-10-27 11:14:49浏览次数:84  
标签:vue 跨域 url request token baseURL 简易版

当后端接口没有跨域功能时且无法去修改(比如调用第三方接口),就需要前端自己实现跨域功能。
vue-cli项目
1.在根目录的vue.config.js中配置哪些请求需要转发到没有跨域功能的接口:

module.exports = {
  runtimeCompiler: true,

  devServer: {
    proxy: {
      '/token': {
         target: '后端地址',
         changeOrigin: true,
         pathRewrite: {
          '^/token': ''
         }
      },
    }
  },

}

 

2.baseURL改成 '/token'

const service = axios.create({
  // baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  baseURL: '/token', // url = base url + request url
  timeout: 100000 // request timeout
})

 

标签:vue,跨域,url,request,token,baseURL,简易版
From: https://www.cnblogs.com/naitang/p/16831482.html

相关文章

  • hansontable在vue中的基本使用
    代码Test.vue<template><divid="hansontable"><hot-table:data="data":settings="hotSettings"ref="hotTableRef"></hot-table><......
  • vue之hello
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-......
  • 8_vue是如何进行数据代理的
    在了解了关于js当中的Object.defineProperty()这个方法后,我们继续对vue当中的数据代理做一个基于现在的解析建议观看之前先了解下js当中的Obejct.defineProperty()链接地......
  • vue3-setup 的参数
    setup(props,context){}第一个参数:    props,是一个对象,包含父组件传递给子组件的所有数据。在子组件中使用props进行接收,包含配置声明并传入的所有的属性的......
  • Tauri-Vue3桌面端聊天室|tauri+vite3仿微信|tauri聊天程序EXE
    基于tauri+vue3.js+vite3跨桌面端仿微信聊天实例TauriVue3Chat。tauri-chat运用最新tauri+vue3+vite3+element-plus+v3layer等技术跨桌面端仿微信|QQ聊天程序EXE。基本实......
  • Vue的双向绑定 v-model的原理
    Vue的双向绑定v-model的原理使用V-model进行绑定v-model的效果就是用户在输入的时候实际上实在修改txtVal的值,修改成用户输入的内容<inputtype="text"v-model="txt......
  • 学习笔记——Vue
    2022-10-26Vue属性的基本操作一、绑定(1)单向绑定关键词:v-bind用法:v-bind:原属性名="数据模型的key值"例如:v-bind:href="username"(其中"username"中的说明放在“script......
  • Vue 组件化编程
    1.1模块与组件、模块化与组件化1.1.1模块理解:向外提供特定功能的​​js​​​程序,一般就是一个​​js​​文件为什么:​​js​​文件很多很复杂作用:复用​​js​​​,简......
  • vue-03
    目录表单控制购物车案例v-model进阶vue生命周期与后端交互表单控制1.checkbox--单选--布尔值--如是否记住密码checkbox--多选--数组--如爱好redio--单选--字符串--......
  • 购物车与vue生命周期与后端交互
    表单控制1.<inputtype="checkbox">-多选、单选2.<inputtype="radio">-单选<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Titl......