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

在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 {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedMethods("*")
                .allowedHeaders("*")
                .allowedOriginPatterns("*")
                .allowCredentials(true)
                .maxAge(3600);
    }

}