使用nginx解决前端跨域问题

业务说明

• 前端使用vue开发 端口号是8080 后台是springboot 端口号为80,在vue中请求的后台springboot的80端口服务时 会出现跨域问题 此时我们用nginx解决 规定一个端口9000 所有的请求都发送到这个端口上

步骤

1. 下载nginx window地址
2. 将nginx解压到D盘目录
3. 进入nginx目录
   • 发现一个conf目录
   • 进入conf目录 编辑nginx.conf

worker_processes  1;
events {
   worker_connections  1024;
}
http {
   include       mime.types;
   default_type  application/octet-stream;
   sendfile        on;
   keepalive_timeout  65;
   server {
       listen       9000;
       server_name  localhost;
       location ^~/focus/ {
   	  proxy_pass http://localhost:80/focus/;
       }   
       location / {
   	  proxy_pass http://localhost:8080;
       }
       error_page   500 502 503 504  /50x.html;
       location = /50x.html {
           root   html;
       }
   }
}

解释

1. 监听9000端口

    location ^~/focus/ {
		  proxy_pass http://localhost:80/focus/;
        }   

当访问/focus的时候 会反向代理到80/focus请求中

location / {
 	  proxy_pass http://localhost:8080;
     }

当访问/的时候 会访问http://localhost:8080请求中