前后端分离中的跨域问题

示例端口号为：前端8081，后端8080

前端解决方式：

 使用vue cli搭建前端项目，在vue.config.js中加入以下代码即可

module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    host: "127.0.0.1", //可以忽略不写
    port: 8081, //它是用来修改你打开后的端口号的
    open: true, //值为 true的话，项目启动时自动打开到浏览器里边， false不会打开
    proxy: {
      "/api": {
        target: "http://127.0.0.1:8080", //跨域请求的公共地址
        ws: false, //也可以忽略不写，不写不会影响跨域
        changeOrigin: true, //是否开启跨域，值为 true 就是开启， false 不开启
        pathRewrite: {
          "^/api": "", //注册全局路径， 但是在你请求的时候前面需要加上 /api
        },
      },
    },
  },
});

后端解决方式：

有很多种，其中一种为：

 在config包下建一个跨域配置类实现WebMvcConfigurer，重写addCorsMappings即可

//跨域处理
@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                //是否发送Cookie
                .allowCredentials(true)
                //放行哪些原始域
//                .allowedOriginPatterns("*")
                .allowedMethods(new String[]{"GET", "POST", "PUT", "DELETE"})
                .allowedHeaders("*")
                .exposedHeaders("*");
    }
}

还有很多种，加注解都可以处理跨域问题，剩下的自己去百度吧