在Vue脚手架项目中使用axios

首先，需要安装axios，则在终端窗口中，在当前项目文件夹下，执行安装命令：

npm i axios -S

然后，需要在main.js中添加配置：

import axios from 'axios';Vue.prototype.axios = axios;

**注意：**在Vue脚手架项目中使用axios时，在then()的回调中不可以使用匿名函数，只能使用箭头函数。

跨域问题

当尝试通过axios从前端项目（9000端口的项目）向后端项目（9080端口的项目）发起请求时，在浏览器中会提示错误信息，例如：

已拦截跨源请求：同源策略禁止读取位于 http://localhost:9080/album/add-new 的远程资源。（原因：CORS 头缺少 'Access-Control-Allow-Origin'）。状态码：403。

或：

Access to XMLHttpRequest at 'http://localhost:9080/album/add-new' from origin 'http://localhost:9000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

本次提交请求失败的原因是：默认情况下，不允许执行跨域请求，即不允许某个项目向部署在另外一个服务器上的项目发起请求！

要解决这个问题，需要在被请求的后端项目（csmall-product）中，添加Spring MVC的配置类，重写关于跨域的配置，以实现允许跨域访问！

在csmall-product项目中，在根包下创建config.WebMvcConfiguration类，实现WebMvcConfigurer接口，重写其中的addCorsMappings()方法：

@Configuration
public class WebMvcConfiguration implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedMethods("*").allowedHeaders("*").allowedOriginPatterns("*").allowCredentials(true).maxAge(3600);}}

前端vue发送给后端MVC跨域问题相关推荐

Nginx解决前端调用后端接口跨域问题
Nginx解决前端调用后端接口跨域问题参考文章: (1)Nginx解决前端调用后端接口跨域问题 (2)https://www.cnblogs.com/wangymd/p/11200746.html ...
springboot+Vue项目使用axios实现跨域(CROS)
springboot+Vue项目使用axios实现(CROS)跨域一.项目背景二.跨域资源共享 CORS 详解三.axios跨域实现 3.1 安装qs模块 3.2 axios使用四.sprin ...
前端面试查漏补缺--(三) 跨域及常见解决办法
前言本系列最开始是为了自己面试准备的.后来发现整理越来越多,差不多有十二万字符,最后决定还是分享出来给大家. 为了分享整理出来,花费了自己大量的时间,起码是只自己用的三倍时间.如果喜欢的话,欢迎收藏 ...
Springboot整合Shiro前后端分离跨域问题
Springboot整合Shiro前后端分离跨域问题前言:SpringBoot整合shiro进行前后端分离开发时(前端是Vue),项目做了跨域配置,但还是前端请求会出现cros err–显示的跨域问 ...
vue php跨域,Vue 项目中遇到的跨域问题及解决方法(后台php)
问题描述前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错: Th ...
vue php axios 跨域,在vue项目中,使用axios跨域处理
下面我就为大家分享一篇在vue项目中,使用axios跨域处理,具有很好的参考价值,希望对大家有所帮助. 跨域,一个很是让人尴尬的问题,有些人可以在后台中设置请求头,但是很多前端并不具备后台的知识,并无 ...
前端必须懂的计算机网络知识—(跨域、代理、本地存储)
前端必须懂的计算机网络知识系列文章: DNS服务器和跨域问题计算机网络的分层模型 IP地址和MAC地址前端必须懂的计算机网络知识-(跨域.代理.本地存储) 前端必须懂的计算机网络知识-(TCP) ...
前后端分离跨域问题解决方案
问题因为最近在学习vue和springboot.用到了前后端分离.前端webpack打包运行的时候会启动nodejs的服务器占用8080端口,后端springboot自带tomcat启动占用1111 ...
pc网站调用微服务器,【微服务】前后端分离-跨域问题和解决方案
跨域问题存在的原因跨域问题的根本原因:因为浏览器收到同源策略的限制,当前域名的js只能读取同域下的窗口属性.什么叫做同源策略?就是不同的域名, 不同端口, 不同的协议不允许共享资源的,保障浏览器安全 ...

前端vue发送给后端MVC跨域问题

在Vue脚手架项目中使用axios

跨域问题

前端vue发送给后端MVC跨域问题相关推荐

最新文章

热门文章