前后端分离开发必须解决的就是跨域问题了，在这里记录一下关于在前端vue跨域的方法，以供参考

使用npm命令下载axios

npm install axios

新建vue.config.js文件

目标转发的地址localhost:后的端口跟下面后端配置文件设置的端口保持一致

//配置请求转发的代理//定义代理的对象
let proxyObj = {};//拦截http请求
proxyObj['/'] = {ws: false,  //关掉websockettarget: 'http://localhost:8181', //目标转发的地址changeOrigin: true,pathRewrite:{  //请求地址重写'^/': ''  //拦截到的地址不去修改它}
};//把上面的导出来
module.exports = {devServer:{  //配置开发环境host: 'localhost', //端口号port: 8080,proxy: proxyObj  //代理对象}
};

配置main.js

在main.js中加上以下配置

import axios from 'axios';Vue.prototype.axios = axios;
axios.defaults.withCredentials = trueVue.config.productionTip = false
Vue.use(axios);

后端改端口

在后端的application.yml中设置服务器端口

server:port: 8181

是不是觉得很简单，这样我们就可以进行前后端分离开发啦，可以在前端js中使用axios调用接口：

this.axios.get('/user/findAll').then(res => {              //需要把地址前面部分删除console.log(res)}

打开浏览器F12检查console，在后端定义了findAll接口的前提下，就可以看到res了。

前后端分离开发之Vue跨域相关推荐

前后端分离，如何解决跨域问题
前后端分离,如何解决跨域问题跨域 1.Jsonp,只能使用get提交,传输数据量有限 2.CORS(Corss-origin resource sharing)跨域资源共享,支持post提交 ...
前后端分离，如何解决跨域（代理模式）、路由拦截（进入页面需要登录）以及请求拦截（登录TOKEN失效）等问题（初学者）
前端时间项目需要发布一个较大的版本,工作比较忙,加了好多个晚上的班,感觉自己有点缺氧了.最近稍微闲下来了,顺便调休了三天,刚刚给家里来了个大扫除,看着这干干净净的小家,心里顿时舒服了很多. 下面进入正 ...
使用 Nginx 部署前后端分离项目，解决跨域问题
前后端分离这个问题其实松哥和大家聊过很多了,上周松哥把自己的两个开源项目部署在服务器上以帮助大家可以快速在线预览(喜大普奔,两个开源的 Spring Boot + Vue 前后端分离项目可以在线体验了 ...
前后端分离后产生的跨域问题sessionid丢失，cookies无法写入等
文章目录前言一.会话机制 1. 何为一次会话,会话从什么时候开始,从什么时候结束? 2.cookies如何保持会话,它的工作流程? 3.session原理分析: 实例记录sessionid变化(前 ...
一、Django前后端交互之Ajax和跨域问题
一.Ajax介绍 1.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术.AJAX(Asynchronous Javascript And XML)翻译成中文就是" ...
解决前后端分离中文件传输跨域失败问题
笔者在之前的开发中就遇到过这种情况:给与后端的文件下载接口,我在浏览器在postman上试过都是可以的,但在前端上就报这种错误: 看上面的介绍是说前后端跨域问题,可是后端代码中明明配置了放行所有请求, ...
Vue 跨域下载或读取文件
image.png 下载文件 export async function download(file_url, file_name) {let res = await Axios({method: & ...
Python Web前后端分离框架Django+Vue搭建
Python Web前后端分离框架Django+Vue搭建对前面所学知识的归纳整理,感兴趣的可以看看,欢迎指正. 一.前后端分离框架介绍本项目基于 Python 的 Web 框架开发,采用前后端分 ...
vue跨域和拦截器的配置
最近项目中需要使用vue框架.虽然vue在前端开发人员里也不算是什么新鲜的事儿了.只要是搞前端的都会一些vue的操作.我也不多说,直接进入正题.(这儿我以vue2.x为例) 安装什么的,我就不在这儿说 ...

前后端分离开发之Vue跨域

使用npm命令下载axios

新建vue.config.js文件

配置main.js

后端改端口

前后端分离开发之Vue跨域相关推荐

最新文章

热门文章