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

 更新时间:2021年08月12日 09:25:34   作者:HuskySir  
在前后端分离开发中,需要前端调用后端api并进行内容显示,所以本文就介绍了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前后端分离跨域内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue中使用element-ui给按钮绑定一个单击事件实现点击按钮就弹出dialog对话框

    Vue中使用element-ui给按钮绑定一个单击事件实现点击按钮就弹出dialog对话框

    最近遇到了个需求是使用element-ui插件编写页面,点击按钮,弹出对话框,这篇文章主要给大家介绍了关于Vue中使用element-ui给按钮绑定一个单击事件实现点击按钮就弹出dialog对话框的相关资料,需要的朋友可以参考下
    2022-11-11
  • Vue过滤器与内置指令和自定义指令及组件使用详解

    Vue过滤器与内置指令和自定义指令及组件使用详解

    这篇文章主要介绍了Vue过滤器与内置指令和自定义指令及组件使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2022-12-12
  • vue.js el-table动态单元格列合并方式

    vue.js el-table动态单元格列合并方式

    这篇文章主要介绍了vue.js el-table动态单元格列合并方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • vue3关于时间显示格式化的问题

    vue3关于时间显示格式化的问题

    这篇文章主要介绍了vue3关于时间显示格式化的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue-cli3 karma单元测试的实现

    vue-cli3 karma单元测试的实现

    这篇文章主要介绍了vue-cli3 karma单元测试的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • Vue登录主页动态背景短视频制作

    Vue登录主页动态背景短视频制作

    这篇文章主要为大家详细介绍了Vue登录主页动态背景短视频的制作方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • vue自动添加浏览器兼容前后缀操作

    vue自动添加浏览器兼容前后缀操作

    这篇文章主要介绍了vue自动添加浏览器兼容前后缀操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • Vue使用font-face自定义字体的案例详解

    Vue使用font-face自定义字体的案例详解

    @font-face 是 CSS 中的一个规则,它允许你加载服务器上的字体文件(远程或者本地),并在网页中使用这些字体,本文给大家介绍了Vue使用font-face自定义字体的案例,并通过代码讲解的非常详细,需要的朋友可以参考下
    2024-03-03
  • 在Vue中实现网页截图与截屏功能详解

    在Vue中实现网页截图与截屏功能详解

    在Web开发中,有时候需要对网页进行截图或截屏,Vue作为一个流行的JavaScript框架,提供了一些工具和库,可以方便地实现网页截图和截屏功能,本文将介绍如何在Vue中进行网页截图和截屏,需要的朋友可以参考下
    2023-06-06
  • Spring boot 和Vue开发中CORS跨域问题解决

    Spring boot 和Vue开发中CORS跨域问题解决

    这篇文章主要介绍了Spring boot 和Vue开发中CORS跨域问题解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09

最新评论