快速解決前後端跨域問題

跨域和同源策略

 需求

最近使用一個golang的前後端項目，本地運行老是跨域

1、前端地址：http://192.168.3.12:8888/

2、後端地址：http://192.168.3.12:8000/

可以明顯看出是不同的端口，協議都是localhost沒啥問題

 解決方案

使用nginx解決，配置一個虛擬server。命名爲：sky.tinywan.cn.conf

server {
    server_name sky.tinywan.cn;

    # 代理前端
    location / {
        proxy_pass http://192.168.3.12:8888;
    }

    # 代理後端
    location /apis/ {
        add_header Access-Control-Allow-Origin '*';
        add_header Access-Control-Allow-Methods 'GET, PUT, POST, DELETE, OPTIONS';
        add_header Access-Control-Allow-Headers 'Origin, X-Requested-With, Content-Type, Accept, Authorization';
        if ($request_method = 'OPTIONS') {
            return 204;
        }
        proxy_pass http://192.168.3.12:8000;
    }
}

上面由於使用Docker，所以直接是使用的宿主機的ip地址 192.168.3.12

修改以下本地的hosts（路徑：C:\Windows\System32\drivers\etc）文件，添加以下內容　　

127.0.0.1       sky.tinywan.cn

配置好後，重啓nginx

 修改前端本地環境配置 .env.development

 

# 本地環境
ENV = 'development'

# 本地環境接口地址
VITE_API_URL = 'http://sky.tinywan.cn/apis'

 

這時候直接通過域名訪問