Vue和Springboot前后端分离项目 跨域问题 配置

目录

前言

1.为什么会出现跨域？

2.什么是跨域？

一、后端配置

1. 配置类

2. 注解

二、前端配置

vue.config.js

---

前言

1.为什么会出现跨域？

出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）。

2.什么是跨域？

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。

当前页面url	被请求页面url	是否跨域	原因
http://www.test.com/	http://www.test.com/index.html	否	同源(协议、域名、端口号相同)
http://www.test.com/	https://www.test.com/index.html	跨域	协议不同 (http/https)
http://www.test.com/	百度一下，你就知道	跨域	主域名不同 (test/baidu)
http://www.test.com/	http://blog.test.com/	跨域	子域名不同 (www/blog)
http://www.test.com:8080/	http://www.test.com:7001/	跨域	端口号不同(8080/7091）

一、后端配置

1. 配置类

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

//解决跨域问题
@Configuration
public class CrosConfiguration implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }

}

2. 注解

@CrossOrigin(origins = "*", maxAge = 3600)

//origins:是允许访问的列表（origins=“网址”）

//maxAge:准备响应前的 缓存持续的 最大时间

二、前端配置

vue.config.js

Vue项目中的vue.config.js 配置

图中最后一个文件便是

//跨域配置

module.exports = {
    publicPath: './',    // 基本路径 // 设置打包文件相对路径
    //baseUrl: './',  vue cli3.3之后废除了baseUrl,在这之后需要使用 publicPath

    //open:false, //项目运行成功后是否直接打开浏览器
    //overlay:true,//当出现编译错误或警告时，在浏览器中显示全屏覆盖。
    
    
    assetsDir: 'static',    //指定打包的资源目录
    /*vue-cli4 执行打包命令时，默认打包的位置是dist文件夹下，不会自动打包为一个模块（文件夹）。
    解决：在 vue.config.js 文件中设置 assetsDir 指定打包的目录为根目录下的 static 文件夹，
    就会在 dist 文件夹下自动生成一个新的文件夹 static 来存放打包的静态资源。*/

    productionSourceMap: false,

    devServer: {                
        //port:9876,            //表示给当前的vue项目一个动态启动地址 采用默认8080
        proxy: {                //设置代理，必须填 proxy代理只能解决开发环境下的跨域，上线之后，此种跨域将不再生效
            '/api': {           //设置拦截器 拦截器格式斜杠+拦截器名，名字自定
                target: 'http://localhost:8086',    //代理的目标地址 与idea项目的启动端口一致
                changeOrigin: true, //是否允许跨域请求
                pathRewrite: {      //路径重写
                    '/api': ''      //选择忽略拦截器里面的单词
                    /** 
                    api的理解
                    '/api'：是指遇到这个字符开头的话，在这个字符前面加上target里面的ip或者域名。
                    举例：
                    ①登录接口：http://localhost:8086/login
                    …中间省略了配置过程…
                    ②npm run serve: Local: http://localhost:8080/
                    ③点击后发送的登录请求：http://localhost:8080/api/login
                    ④/api 的作用就是将/api前的http://localhost:8080 变成 target的内容 http://localhost:8086
                    ⑤完整的路径变成了http://localhost:8086/api/login
                    ⑥实际接口当中没有这个api，所以pathwrite重写就解决这个问题的。
                    ⑦pathwrite识别到api开头就会把/api重写成空，
                    那就是不存在这个/api了，完整的路径又变成：http://localhost:8086/login
                    */
                }
            }
        }
    }
}

 /** 
                    api的理解
                    '/api'：是指遇到这个字符开头的话，在这个字符前面加上target里面的ip或者域名。
                    举例：
                    ①登录接口：http://localhost:8086/login
                    …中间省略了配置过程…
                    ②npm run serve: Local: http://localhost:8080/
                    ③点击后发送的登录请求：http://localhost:8080/api/login
                    ④/api 的作用就是将/api前的http://localhost:8080 变成 target的内容 http://localhost:8086
                    ⑤完整的路径变成了http://localhost:8086/api/login
                    ⑥实际接口当中没有这个api，所以pathwrite重写就解决这个问题的。
                    ⑦pathwrite识别到api开头就会把/api重写成空，
                    那就是不存在这个/api了，完整的路径又变成：http://localhost:8086/login
                    */

欢迎点赞+关注，哪里有问题请大佬们多多指点~