快捷導(dǎo)航

Nginx反向代理實現(xiàn)Vue跨域的示例

更新時間：2023年06月01日 10:27:51 作者：fkjavaer

本文主要介紹了Nginx反向代理實現(xiàn)Vue跨域的示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1.場景

項目前后端分離，前端項目使用vue框架書寫，在請求后端接口時，由于服務(wù)運行在不同的服務(wù)器，就會出現(xiàn)跨域問題。示例：

運行環(huán)境：Windows，

前端項目的項目地址為：192.168.1.2:8082，

后端項目的項目地址為：192.168.1.3:8083，由于ip地址不同，肯定會存在跨域問題

2.解決方法

（1）后端配置跨域，如下是springboot的配置

public class TestApplication implements WebMvcConfigurer {
    public static void main(String[] args) {
        SpringApplication.run(TestApplication.class, args);
    }
    @Override
    protected void addCorsMappings(CorsRegistry registry) {
        // 解決跨域問題
        registry.addMapping("/**")
                .allowCredentials(true)
                .allowedHeaders("*")
                .allowedOrigins("*")
                .allowedMethods("*")
                .maxAge(3600);
        super.addCorsMappings(registry);
    }
}

但是在復(fù)雜請求時（帶自定義的請求頭參數(shù)），由于瀏覽器的自檢機制，會先發(fā)送一次options請求，這無疑會增加服務(wù)器的負擔(dān)，這就很煩，那么怎么解決這個問題呢？馬上揭曉答案

（2）使用nginx進行反向代理，徹底解決跨域問題，再也不用擔(dān)心options請求了

第一步：下載nginx并解壓

第二步，打開conf目錄下的nginx.conf文件，找到以下代碼塊

（1）nginx配置文件基本參數(shù)的釋義

server {
		listen  8085;							// 我們要監(jiān)聽的端口（可以是沒有被占用的任意端口號）
		server_name 192.168.1.1;				// 你的服務(wù)器ip地址
		location /api {							// 要代理的路徑，這個是指以api開頭
			proxy_pass http://127.0.0.1:8082/;	// 代理指向的ip地址以及端口號
		}
}

（2）上面我們說到前端的項目地址為192.168.1.2:8082，那么我們實際就可以這樣來配置

server {
	listen  8085;									// 我們要監(jiān)聽的端口（可以是沒有被占用的任意端口號）
		server_name 192.168.1.2;					// 你的服務(wù)器ip地址
		location / {								// 代理/開頭的路徑
			proxy_pass http://192.168.1.2:8082/;	// 代理指向的ip地址以及端口號,切記加上http
		}
		location /api {								//  代理api開頭的路徑
			proxy_pass http://192.168.1.3:8083/;	//	指向后端接口的IP地址加端口號
		}
}

（3）點擊nginx.exe將其啟動

這樣我們在訪問http://192.168.1.2:8085的時候，就會打開你的前端項目頁面，在請求接口時，需要在前端項目將url改為例如http://192.168.1.2:8085/api/user/login。這樣就會將請求的接口地址帶到http://192.168.1.3:8083/user/login上，可以發(fā)現(xiàn)，我們前端項目的域名和請求后端接口的域名都是192.168.1.2:8085，這樣就不會存在跨域問題了。

到此這篇關(guān)于Nginx反向代理實現(xiàn)Vue跨域的示例的文章就介紹到這了,更多相關(guān)Nginx反向代理Vue跨域內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: