# 前端本地开发环境解决跨域：反向代理

这里说的域名就是ip+端口绑定的；可以这样理解一个解析后的域名 等同于 Ip+端口

例如：
解析后的域名：www.baidu.com/api = localhost:80/api =190.168.1.1:80/api 

通常情况下，后端在配置请求的时候，如果没有设置允许所有域名访问，那么我们本地浏览器打开的 localhost:80通过axios发起的请求就会被浏览器的同源策略拦截；本质原因就是 域名不一致，前端请求的域名是：localhost:80/api，后端接口的域名是：www.****.com/api ;被浏览器识别成不同的域名了；

我这里贴一个java里面处理跨域的方法，测试环境能改后端是最简单的了，*代表允许所有的域名访问（localhost:80/api被包含了）

    @Override
    public void addCorsMappings(CorsRegistry registry) {
      // 设置允许跨域的路径
        registry.addMapping("/**")
                // 设置允许跨域请求的域名
                .allowedOriginPatterns("*")
                // 是否允许cookie
                .allowCredentials(true)
                // 设置允许的请求方式
                .allowedMethods("GET", "POST", "DELETE", "PUT")
                // 设置允许的header属性
                .allowedHeaders("*")
                // 跨域允许时间
                .maxAge(3600);
    }

进入正题：前端本地的解决方式

在使用webpack或者vite构建工具时候，配置反向代理，把本地所有的axios请求的地址请求地址（域名：端口）改成：/api/,

  baseURL: "/api/",

我使用vite打包，在vite.config.js中进行配置代理；使用正则表达式，本地发起请求的地址 /api/ 都会被自动替换成实际后端请求地址；这样就实现了当前请求的地址就会被后端接收识别为和都一样的域名；保证了前后端域名一直，解决了跨域；

    server: {
        host:"0.0.0.0",
        open: true,//启动项目自动弹出浏览器
        port: 3000,//启动端口
        proxy: {
            "/api": {
                target: 'http://121.****.93.45:19002',	//实际后端请求地址
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, '')

            },
        }
    }

加个备注

如果实际项目部署，nginx里面也可以使用同样的方式，通过反向搭理转发，来解决跨域问题

    location /api {
        proxy_set_header  X-Real-IP   $remote_addr;
        # api_server是自己定义的upstream
        proxy_pass http://111.****.91.20:8081;
    }