# 前端本地開發環境解決跨域：反向代理

這里說的域名就是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;
    }