Vue+SpringBoot前后端分离中的跨域问题

在前后端分离开发中，需要前端调用后端api并进行内容显示，如果前后端开发都在一台主机上，则会由于浏览器的同源策略限制，出现跨域问题(协议、域名、端口号不同等)，导致不能正常调用api接口，给开发带来不便。

封装api请求

import axios from 'axios'

//axios.create创建一个axios实例，并对该实例编写配置，后续所有通过实例发送的请求都受当前配置约束
const $http = axios.create({
    baseURL: '',
    timeout: 1000,
    //headers: {'X-Custom-Header': 'foobar'}
});

// 添加请求拦截器
$http.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
$http.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response.data;   //返回响应数据的data部分
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

export default $http

api调用函数

export const getCourses = () => {
return $http.get('http://localhost:8080/teacher/courses')
}

在本例中，前端使用8081端口号，后端使用8080端口号，前端通过调用api请求数据失败

postman测试此api接口正常

如何解决同源问题？

1、在vue根目录下新建vue.config.js文件并进行配置

vue.config.js文件

module.exports = {
    devServer: {
        host: 'localhost',        //主机号
        port: 8081,               //端口号
        open: true,               //自动打开浏览器
        proxy: {
            '/api': {
                target: 'http://localhost:8080/',       //接口域名
                changeOrigin: true,                     //是否跨域
                ws: true,                               //是否代理 websockets
                secure: true,                           //是否https接口
                pathRewrite: {                          //路径重置
                    '^/api': '/'
                }
            }
        }
    }
};

2、修改api请求

api调用函数

export const getCourses = () => {
  return $http.get('/api/teacher/courses')
}

在这里，因为vue.config.js配置了接口域名，所以此处url只需要写余下来的部分

url完全体

http://localhost:8080/teacher/courses

但是这里因为运用到代理，所以在余下的部分(即'/teacher/courses')前加上'/api',组成'/api/teacher/courses'

此时跨域问题解决，前端可以从后端接口拿到数据并显示

问题解决！

到此这篇关于Vue+SpringBoot前后端分离中的跨域问题的文章就介绍到这了,更多相关vue SpringBoot前后端分离跨域内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • springboot 配置文件里部分配置未生效的解决

    springboot 配置文件里部分配置未生效 最近用springboot搭了个项目,上线过段时间就会出现卡死,猜测是数据库连接池的连接被占满,用的连接池是druid,于是给项目加上了一个数据库连接池监控. 代码如下: @Configuration public class DruidConfiguration { /** * * 注册一个StatViewServlet * * @return * */ @Bean public ServletRegistrationBean DruidStat

  • 在springboot中注入FilterRegistrationBean不生效的原因

    在springboot中注入FilterRegistrationBean不生效的原因

    springboot注入FilterRegistrationBean不生效 回顾 最近自定义了两个过滤器,接口请求返回加密和sql注入处理过滤器,因为在封装一些工具包,我在单独调好之后,就打算做成一个注解,像springboot启动类上加@EnableScheduling一样,可以随意控制,当我不想让这俩过滤器生效的时候,那就不加这个注解就可以了. 当然我想到了FilterRegistrationBean的使用方法,注入这两个过滤器. 但是当我写完之后,打成包之后,发现只有sql注入过滤器生效.

  • 全面汇总SpringBoot和SpringClould常用注解

    全面汇总SpringBoot和SpringClould常用注解

    目录 什么是注解? 一.SpringBoot注解 1.1.@SpringBootApplication 1.2.@Repository 1.3.@Service 1.4.@RestController 1.5.@ResponseBody 1.6.@Component 1.7.@ComponentScan 1.8.@Configuration 1.9.@Bean 1.10.@EnableAutoConfiguration 1.11.@AutoWired 1.12.@Qualifier 1.13.@

  • 使用Springboot实现word在线编辑保存

    使用Springboot实现word在线编辑保存

    目录 一.查看官网 二.查看下载包 1.springboot 引入 pageoffice5.2.0.12.jar 2.springboot 引入thymleaf 3.编写配置文件 4.编写 index.html 和 word.html 4.1 index.html 4.2 word.html 5.编写PageOfficeController 6.application.yml 配置 7.注意 项目结构 三.测试 输入网址 注意事项 四.gitee地址 总结 一.查看官网 http://www.z

  • springboot 设置server.port不生效的原因及解决

    springboot 设置server.port不生效的原因及解决

    springboot 设置server.port不生效 近年来,springboot以其快速构建方便便捷,开箱即用,约定优于配置(Convention Over Configuration)的特性深受广大开发者喜爱. springboot已经集成配置好了一套web开发的默认配置,开发者可以无需修改任何配置即可开始一个web工程,但是实际情况中有时候开发者还是需要修改部分默认配置项来使其更加契合自己的项目需求. 下面就其中一个小问题做个记录 在配置服务启动的端口时,springboot默认在app

  • Vue+SpringBoot前后端分离中的跨域问题

    Vue+SpringBoot前后端分离中的跨域问题

    在前后端分离开发中,需要前端调用后端api并进行内容显示,如果前后端开发都在一台主机上,则会由于浏览器的同源策略限制,出现跨域问题(协议.域名.端口号不同等),导致不能正常调用api接口,给开发带来不便. 封装api请求 import axios from 'axios' //axios.create创建一个axios实例,并对该实例编写配置,后续所有通过实例发送的请求都受当前配置约束 const $http = axios.create({ baseURL: '', timeout: 1000

  • Springboot前后端分离项目配置跨域实现过程解析

    项目登录流程如下 用户进入前端登录界面,输入账号密码等,输入完成之后前端发送请求到后端(拦截器不会拦截登录请求),后端验证账号密码等成功之后生成Token并存储到数据库,数据库中包含该Token过期时间,然后返回生成的Token到前端. 前端收到Token,表示登录成功,把这个Token存储本地.然后跳转到用户中心页面,用户中心页面在ajax的请求头中带上Token,跟随请求用户数据接口一起带到后端. 后端通过拦截器拦截到这个请求,去判断这个Token是否有效,有效就放过去做他该做的事情,无效就

  • vue+springboot前后端分离实现单点登录跨域问题解决方法

    最近在做一个后台管理系统,前端是用时下火热的vue.js,后台是基于springboot的.因为后台系统没有登录功能,但是公司要求统一登录,登录认证统一使用.net项目组的认证系统.那就意味着做单点登录咯,至于不知道什么是单点登录的同学,建议去找一下万能的度娘. 刚接到这个需求的时候,老夫心里便不屑的认为:区区登录何足挂齿,但是,开发的过程狠狠的打了我一巴掌(火辣辣的一巴掌)...,所以这次必须得好好记录一下这次教训,以免以后再踩这样的坑. 我面临的第一个问题是跨域,浏览器控制台直接报CORS,

  • 部署vue+Springboot前后端分离项目的步骤实现

    单页应用 vue经常被用来开发单页应用(SinglePage Web Application,SPA),什么叫做单页应用呢,也就是只有一张web页面的应用,单页应用的跳转只需要刷新局部资源,大大加快的了我们页面的响应速度 前端页面打包 打开vue工程,在项目根目录下创建一个配置文件:vue.config.js,然后在里面写入以下内容: module.exports = { assetsDir: 'static', // 静态资源保存路径 outputDir: 'dist', // 打包后生成的文

  • springboot解决前后端分离时的跨域问题

    随着分布式微服务的兴起,越来越多的公司在开发web项目的时候选择前后端分离的模式开发,前后端分开部署,使得分工更加明确,彻底解放了前端. 我们知道,http请求都是无状态,现在比较流行的都是jwt的形式处理无状态的请求,在请求头上带上认证参数(token等),前后端分离有好处,也有坏处,第一次开发前后端分离项目的人,肯定会遇到前端请求跨域的问题,这个怎么处理呢?在说处理方案前,有必要说明一下为什么会跨域和什么是跨域? 一.为什么会跨域? 出于浏览器的同源策略限制.同源策略(Sameoriginp

  • vue+springboot前后端分离工程跨域问题解决方案解析

    假如是在同一台机器上开发,前后端分离的工程中出现跨域问题的原因是,前端工程和后端工程运行在不同的端口上.只要协议.域名.端口有一个不同就会产生跨域问题,所以在前端工程中请求后端的接口时就会因为端口不同而产生跨域问题. 一.解决跨域的原理 假设前端A要去访问服务器C,可以在A和C之间之间设置一个代理B,A访问C时先访问B,再由B代为请求C并把请求结果返回给A,这样就可以解决跨域问题.其中需要保证的是A访问B和B访问C都不能存在跨域. 二.使用vue自带的proxyTable: proxyTable

  • nodeJS（express4.x）+vue（vue-cli）构建前后端分离实例(带跨域)

    nodeJS（express4.x）+vue（vue-cli）构建前后端分离实例(带跨域)

    准备工作: 1.安装nodejs ---还用我教了? 2.安装依赖包express4.x  点这里>>>nodeJS搭建本地服务器 3.安装vue-cli脚手架 点这里>>>vue-cli构建vue项目 这里强调一下,express是后端服务器,它是一个独立的服务器,vue启动的是前端服务器,vue-cli中已经集成了一个小型的express,这两个服务器是分开放的,但是它们都是基于nodejs的. nodeJS部分:这里我已经认为你搭建好了express服务器,并且能

  • vue2 前后端分离项目ajax跨域session问题解决方法

    最近学习使用vuejs前后端分离,重构一个已有的后台管理系统,遇到了下面这个问题: 实现跨域请求时,每次ajax请求都是新的session,导致无法获取登录信息,所有的请求都被判定为未登陆. 1. vuejs ajax跨域请求 最开始使用的是vue-resource,结果发现vue2推荐的是axios,于是改成axios:安装axios npm install axios -S 安装完成后在main.js中增加一下配置: import axios from 'axios'; axios.defa

  • shiro整合springboot前后端分离

    本文实例为大家分享了shiro整合springboot前后端分离的具体代码,供大家参考,具体内容如下 1.shiro整合springboot的配置 package com.hisi.config; import java.util.LinkedHashMap; import java.util.Map; import javax.servlet.Filter; import org.apache.shiro.session.mgt.eis.MemorySessionDAO; import org

  • SpringBoot+VUE实现前后端分离的实战记录

    SpringBoot+VUE实现前后端分离的实战记录

    一,前端VUE项目 这里使用VUE UI创建一个VUE项目 命令行输入vue ui进入 手动配置项目 选中这三个 点击下一步->点击创建项目 用IDEA打开刚才创建的项目 IDEA中的安装vue插件并重启 IDEA控制台中输入vue add axios安装axios 新建一个Show.vue 在index,js的routes中配置它的路由 编写Show,vue向后端请求数据并展示 <template> <div> <table> <tr> <td

随机推荐