springboot vue跨域问题,spring boot vue跨域

　　在前端分离的开发中，前端需要调用后端api并显示内容，所以本文介绍了Vue SpringBoot前端分离的跨域问题。有兴趣的可以看看。

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

　　封装api请求

　　从“axios”导入axios

　　//axios.create创建一个axios实例，并编写该实例的配置。通过实例发送的所有后续请求都由当前配置绑定。

　　const $http=axios.create({

　　基本URL:“”，

　　超时：1000，

　　//headers:{ X-Custom-Header : foobar }

　　});

　　//添加请求拦截器

　　$ http . interceptors . request . use(function(config){

　　//在发送请求之前做一些事情

　　返回配置；

　　}，函数(错误){

　　//对请求错误做些什么

　　return Promise.reject(错误)；

　　});

　　//添加响应拦截器

　　$ http . interceptors . response . use(function(response){

　　//对响应数据做些什么

　　返回response.data//返回响应数据的数据部分

　　}，函数(错误){

　　//对响应错误采取措施

　　return Promise.reject(错误)；

　　});

　　导出默认$http

　　Api调用函数

　　导出常量getCourses=()={

　　返回$ http . get( http://localhost:8080/teacher/courses )

　　}

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

　　Postman测试这个api接口正常。

如何解决同源问题？

　　1.在vue的根目录下新建一个vue.config.js文件，并进行配置。

　　vue.config.js文件

　　模块.导出={

　　devServer: {

　　Host: localhost ，//主机号

　　端口：8081，//端口号

　　Open: true，//自动打开浏览器。

　　代理服务器：{

　　/api: {

　　Target: 3358localhost: 8080/，//接口域名

　　ChangeOrigin: true，//是跨域的吗？

　　Ws: true，//代理websockets？

　　Secure: true，//是https接口吗？

　　PathRewrite: {//路径重置

　　^/api: /

　　}

　　}

　　}

　　}

　　};

　　2.修改api请求

　　Api调用函数

　　导出常量getCourses=()={

　　返回$ http . get(/API/teacher/courses )

　　}

　　在这里，因为vue.config.js是用接口域名配置的，所以这里只需要写url的其余部分。

　　Url完整正文

　　http://localhost:8080/教师/课程

　　但这里因为是应用于代理，所以在其余(即/老师/课程)之前加/api ，形成/API/老师/课程。

　　这时候跨域问题就解决了，前端可以从后端接口获取数据并显示。

　　解决问题！

　　关于Vue SpringBoot前端分离中跨域问题的这篇文章到此为止。关于vue SpringBoot前后端跨域分离的更多信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。