首页 > 其他分享 >Vue3下的axios跨域问题

Vue3下的axios跨域问题

时间:2023-07-29 10:57:08浏览次数:40  
标签:axios vue 跨域 api Vue3 true target

0、vue-cli版本

vue -V
vue --version

 

 

 

1、根目录找vue.config.js,无则添加文件;然后添加节点:

 

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false,  //关闭语法检查
  devServer : {
    port:3000,  //前端启动端口
    proxy:{
      "/api":{
        target: 'http://localhost:5115/',      //服务器协议、ip和端口号 后端接口的根目录 https://localhost:7115/api/
        changeOrigin: true,                    //是否跨域
        //secure:true,  //如果是https接口,需要配置这个参数
        ws:true,  //是否代理websockets
        pathRewrite: {
            '^/api': '/api'  //接口中含api则这个写法,不含则 用   '/'
        }
      }
    }
  }
}
)
vue.config.js

 '/api'  代表 你所有的请求从匹配到  "/api"开始会自动拼接上target中的地址然后发送给服务端。

2、axios方法请求修改

将原来的后端地址,也就是在上一步设置的target地址,改成  “/api”;

 3、运行看请求

 

标签:axios,vue,跨域,api,Vue3,true,target
From: https://www.cnblogs.com/lanrenka/p/17589417.html

相关文章

  • Vue3之ref取render形式组件jsx元素节点
    [2023年7月28日22:16:06]ref取render方式组件节点一开始注意到组件setup和render一起使用的情况,好奇怎么通过ref取到render中jsx里的节点,一开始试了以下的尝试,结果是undefined的:import{defineComponent,ref,onMounted}from"vue";exportdefault......
  • vue3拖拽插件vue-draggable-next
    -基于sortablejs;npm地址:https://www.npmjs.com/package/vue-draggable-next配置项:https://github.com/SortableJS/Sortable#options import{VueDraggableNextasDraggable}from'vue-draggable-next';components:{HeaderTitle,TitlePanel,Draggable},......
  • vue3跨越
    在vue3项目中使用跨域1.服务器代理server:{port:8080,//设置服务启动端口号open:true,//设置服务启动时是否自动打开浏览器cors:true,//允许跨域//设置代理,根据我们项目实际情况配置proxy:{'/api':{//apiTest是自行设置的请求前......
  • Vue2 & Vue3生命周期对比
    Vue2生命周期图示  Vue3生命周期图示  二者对比 ......
  • vue-cli构建Vue3项目
    1、node环境检查node-v//查询Node版本 2、vue-cli版本检查vue-V//查询vue-cli版本npmuninstall-gvue-cli//卸载旧版vue-clinpminstall-gvue-cli//旧版vue-cli2npminstall-g@vue-cli//vue-cli3  其他命令:vue-V//查询vue-cli脚手架版本np......
  • 前后端分离跨域方案
    前言最近在写前后端分离项目的时候,遇到了前后端分离必须解决的跨域问题,而我起初只是在Controller层加上了注解@CrossOrigin(allowCredentials="true"),暂时解决了跨域问题。但是在开发验证码的时候,始终获取不到session中的验证码字符,获取到的验证码字符始终为null,调试之后发现放......
  • nginx跨域配置
    add_headerAccess-Control-Allow-Credentialstrue;add_headerAccess-Control-Allow-Headers$http_access_control_request_headers;add_headerAccess-Control-Allow-Methods'POST,GET,OPTIONS,DELETE,PUT,HEAD,PATCH';add_headerAccess-Control-All......
  • 解决跨域问题
    一、部署在IIS上跨域1.打开IIS管理,找到网站 2.找到HTTP响应头标 3.打开HTTP响应头标 添加:Access-Control-Allow-Origin:*二、Nginx跨域location/api{proxy_passhttp://b.com/;#设置是否允许cookie传输ad......
  • Vue3多条数据复制功能,复制内容用逗号拼接
    <divclass="person-list"><divclass="person-item">9939939939399399</div><divclass="person-item">1111111111111111</div></div>&......
  • Vue3的响应式数据处理方式
    问题:data[0].tableId是undefined,但控制台可以打印出data[0]的值原因: Vue3的响应式数据处理方式导致的。Vue3使用了Proxy来实现响应式数据。当你访问一个响应式对象的属性时,Vue会在底层进行拦截,并返回响应式的值。这意味着,当你访问`data[0].TableId`时,Vue会返回......