欢迎来到代码驿站!

vue

当前位置:首页 > 网页前端 > vue

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

时间:2022-03-17 09:52:01|栏目:vue|点击:

在前后端分离开发中,需要前端调用后端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'

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

问题解决!

上一篇:windows下vue-cli及webpack搭建安装环境

栏    目:vue

下一篇:解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题

本文标题:Vue+SpringBoot前后端分离中的跨域问题

本文地址:http://www.codeinn.net/misctech/196485.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有