vue axios跨域问题

vue3为例：

【vue.config.js】文件，目录里面没有的话需要真机创建

代理的它通俗意思：我这里设置api意思就是在遇到于/api开始的接口的时候，间本地地址转化为接口地址

如：http://localhost:8080/api 等价于 http://123.123.122.166:3101

module.exports = {devServer: {proxy: {'/api': {       // 目标的路径target: 'http://123.123.122.166:3101',  //也就是接口地址// 允许跨域changeOrigin: true,// 重写跨域pathRewrite: {'^/api': ''}}}}
}

在main.js的axios调用接口的时候

//这个是我采用了开发时和发布时的环境设置
//方法1
const BASEURL = process.env.NODE_ENV === 'production' ? '' : '/api'
let instance = axios.create({baseURL: BASEURL,timeout: 30000,withCredentials: true
})

// 如果你们不需要搞开发时还是发布时就这样
//方法2：
let instance = axios.create({baseURL: '/api',   //这里就是vue.config.js文件里面设置的代理 /apitimeout: 30000,withCredentials: true
})//或者
axios.defaults.baseURL = "/api";

使用的时候

methods:{async addClick(){let {data:res} = await this.$http.get('/user/mobileLogin',{params:{userName:this.userName,passWord:this.passWord}})}
}

请求的网络如上图，前部分 http://localhost:8080/api 会在浏览器内部等价于 http://123.123.122.166:3101 接口地址，使用实际上的请求是 http://123.123.122.166:3101/user/mobileLogin?userName=admin&password=123456

vue axios跨域问题相关推荐

解决vue axios跨域请求发送两次问题
解决vue axios跨域请求发送两次问题参考文章: (1)解决vue axios跨域请求发送两次问题 (2)https://www.cnblogs.com/wordblog/p/12171875. ...
uni-app vue axios跨域访问问题
uni-app vue axios跨域访问问题为了解决这个axios跨域访问报错问题,查了很多资料,最终还是解决了,特此在这里记录下方法. main.js import axios from 'st ...
vue axios 跨域_SpringBoot+Vue从零开始搭建系统(三)前后端整合二
前端整合前端代码 KwgcFooter.vue 页面底部 KwgcHeader.vue 页面头部 KwgcLogin.vue 用户名: 密码: 登录登录验证情况: kwgcHeader.vue 这 ...
【vue axios 跨域】cookie、origin等一步步递进的跨域踩坑已解决
前后端对接必出bug,最近连续对接了两个项目,对解决跨域有点感觉了,跟大家分享一下经验,都是血的教训- 两个项目都是Springboot+Vue(axios网络请求).本人主要负责前端,所以前端会分享 ...
vue axios跨域 Request Method: OPTIONS问题
今天做跨域登录功能遇到这个问题(后端已做跨域处理): 当跨域请求为post时候,请求的method变为了options. 在这里插入图片描述其实跨域分为简单跨域请求和复杂跨域请求: 简单跨域请求是 ...
uni-app H5跨域问题解决方案（CORS、Cross-Origin） VUE axios 跨域问题 No ‘Access-Control-Allow-Origin‘ header is pres
原来不同服务器框架要用不同的跨域配置,比如我用的是tomcat就用的是下面这个教程: https://blog.csdn.net/pk694046220/article/details/1038371 ...
vue axios 跨域配置
devServer: {disableHostCheck: true,host:'http://127.0.0.1',// 前端地址port:'8020',proxy: {'/api':{target ...
vue axios跨域请求_axios的请求拦截和vue路由的导航守卫有什么区别
在Vue项目中,有两种用户登录状态判断并处理的情况,分别为:导航守卫和axios拦截器. 1. 导航守卫:拦截组件导航守卫就是我们进行某些页面的时候需要判断当前用户是否登录过,如果登陆过,则可以跳转 ...
VUE axios 跨域访问问题：CORS error
一.问题现象项目采用的VUE前后端分离开发方案,前端axios GET请求chrome调试模式显示: http stauts:CORS error 请求头:Request URL: http://l ...

vue axios跨域问题

vue3为例：

vue axios跨域问题相关推荐

最新文章

热门文章