vue項目部署跨域問題的詳細解決過程

更新時間：2022年05月01日 08:52:50 作者：家家小迷弟

一般我們的前端Vue項目中都會涉及到跨域的問題,下面這篇文章主要給大家介紹了關于vue項目部署跨域問題的詳細解決過程,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下

首先是后端：

過濾器：

@Configuration
public class GlobalCorsConfig  {

    /**
     * 允許跨域調(diào)用的過濾器
     */
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        //允許所有域名進行跨域調(diào)用
        config.addAllowedOriginPattern("*");
       // config.addAllowedOrigin("*");
        //允許跨越發(fā)送cookie
        config.setAllowCredentials(true);
        //放行全部原始頭信息
        config.addAllowedHeader("*");
        //允許所有請求方法跨域調(diào)用
        config.addAllowedMethod("*");
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

如果setAllowCredentials為true，則config.addAllowedOrigin("*")的參數(shù)就不能是*，必須指明，這里直接注釋掉，使用addAllowedOriginPattern

Controller層：

路徑里包含了web，這個很重要，記住

yml文件：

后端的端口8086，應用上下文路徑：/weijianweiAdminApi

再是前端：

dev.env.js中設置BASE_API為/web

在index.js中設置dev里面的proxyTable，這里是在開發(fā)過程中，在node.js上實現(xiàn)的一個轉(zhuǎn)發(fā)，將請求轉(zhuǎn)發(fā)到后端，主要解決了開發(fā)過程中的跨域問題。

設置完這些以后，npm run dev，項目在本地可以運行了

開發(fā)完成以后，項目打包，放到服務器上：

首先在服務器的nginx的html文件夾中創(chuàng)建文件夾命名為weijianwei

將npm run build 打包生成的文件放在weijianwei中：

修改index里面的assetsPublicPath為weijianwei，對應上面文件夾名稱

設置nginx配置文件nginx.conf：

 server {
        listen       8099;      
		server_name  localhost;
		location /weijianweiAdminApi/ {
            proxy_set_header Host $host;
			proxy_set_header  X-Real-IP        $remote_addr;
			proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
			proxy_set_header X-NginX-Proxy true;
			client_max_body_size 200m;
			proxy_pass http://localhost:8086;
        }
    }

監(jiān)聽端口8099，匹配路徑weijianweiAdminApi，將其轉(zhuǎn)發(fā)到http://localhost:8086上，

此時訪問項目：http://localhost:8099/weijianwei 成功出現(xiàn)頁面，登錄時候，預檢請求通過，正式請求報跨域問題

前端項目prod.env.js設置 BASE_API: