Nginx反向代理解决Vue跨域问题

1.场景

项目前后端分离，前端项目使用vue框架书写，在请求后端接口时，由于服务运行在不同的服务器，就会出现跨域问题。

示例：

运行环境：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);
    }
}

但是在复杂请求时（带自定义的请求头参数），由于浏览器的自检机制，会先发送一次options请求，这无疑会增加服务器的负担，这就很烦，那么怎么解决这个问题呢？马上揭晓答案

（2） 使用nginx进行反向代理，彻底解决跨域问题，再也不用担心options请求了

第一步：下载nginx并解压

第二步，打开conf目录下的nginx.conf文件，找到以下代码块

（1）nginx配置文件基本参数的释义

server {
		listen  8085;							// 我们要监听的端口（可以是没有被占用的任意端口号）
		server_name 192.168.1.1;				// 你的服务器ip地址
		location /api {							// 要代理的路径，这个是指以api开头
			proxy_pass http://127.0.0.1:8082/;	// 代理指向的ip地址以及端口号
		}
}

（2）上面我们说到前端的项目地址为192.168.1.2:8082，那么我们实际就可以这样来配置

server {
	listen  8085;									// 我们要监听的端口（可以是没有被占用的任意端口号）
		server_name 192.168.1.2;					// 你的服务器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上，可以发现，我们前端项目的域名和请求后端接口的域名都是192.168.1.2:8085，这样就不会存在跨域问题了。