快捷導(dǎo)航

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

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

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

1.場景

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

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

前端項(xiàng)目的項(xiàng)目地址為：192.168.1.2:8082，

后端項(xiàng)目的項(xiàng)目地址為：192.168.1.3:8083，由于ip地址不同，肯定會(huì)存在跨域問題

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ù)雜請(qǐng)求時(shí)（帶自定義的請(qǐng)求頭參數(shù)），由于瀏覽器的自檢機(jī)制，會(huì)先發(fā)送一次options請(qǐng)求，這無疑會(huì)增加服務(wù)器的負(fù)擔(dān)，這就很煩，那么怎么解決這個(gè)問題呢？馬上揭曉答案

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

第一步：下載nginx并解壓

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

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

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

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

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

（3）點(diǎn)擊nginx.exe將其啟動(dòng)

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

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

您可能感興趣的文章: