vue 项目部署，并使用nginx反向代理异步请求接口，解决跨域问题

最新推荐文章于 2024-08-06 16:51:47 发布

会飞的小蜗

最新推荐文章于 2024-08-06 16:51:47 发布

阅读量1.8k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/YL3126/article/details/113780798

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

vue 项目部署，并使用nginx反向代理异步请求接口，解决跨域问题

1.首先项目打包

修改 vue / config /index.js

打包命令：npm run build

打包完成后会在目录下的dist 文件夹下生成打包文件

将dist 文件夹传到服务器，用nginx配置端口等，并反向代理接口地址解决跨域问题

http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

   
	include /usr/local/nginx/conf/conf.d/*.conf;
	server {
        listen       8881;#默认端口是80，如果端口没被占用可以不用修改
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        root        /usr/local/ssp-pc-vue/dist;#vue项目的打包后的dist

        location / {
            try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
            index  index.html index.htm;
        }
		# 匹配以/apis/开头的请求
        location ^~ /ssp/ {
            proxy_pass http://xxxxxxx.xxxx.com;
        }
        #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
        #因此需要rewrite到index.html中，然后交给路由在处理请求资源
        location @router {
            rewrite ^.*$ /index.html last;
        }
        #.......其他部分省略
  }
}

nginx.conf(文件)**************


#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;
    fastcgi_intercept_errors on;

	include /usr/local/nginx/conf/conf.d/*.conf;
	
}

.conf********************

   proxy_intercept_errors on;
   server {
        listen 11122;
        server_name 172.16.16.252 jczl.igalaxycn.com localhost;
        #access_log  /usr/local/nginx/logs/8880_access.log  main;

        underscores_in_headers on; #该属性默认为off，表示如果header name中包含下划线，则忽略掉。

		location / {
			  proxy_pass http://localhost:8880;
			  proxy_cookie_path / /;
			  proxy_set_header   Referer $http_referer;
			  proxy_set_header   Cookie $http_cookie;
			  proxy_set_header  Host   $host:$server_port;
			  proxy_set_header  X-Real-IP   $remote_addr;
			  proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
			  proxy_set_header  X-Forwarded-Proto $scheme;
			
			  proxy_connect_timeout 300s;
			  proxy_send_timeout 300s;
			  proxy_read_timeout 300s;
		}
		
		location /ybssapi/ {
			  proxy_pass http://localhost:8990/;
			  proxy_cookie_path /ybssapi/ /;
			  proxy_cookie_path /ybssapi /;
			  proxy_set_header   Referer $http_referer;
			  proxy_set_header   Cookie $http_cookie;
			  proxy_set_header  Host   $host:$server_port;
			  proxy_set_header  X-Real-IP   $remote_addr;
			  proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
			  proxy_set_header  X-Forwarded-Proto $scheme;
			
			  proxy_connect_timeout 300s;
			  proxy_send_timeout 300s;
			  proxy_read_timeout 300s;
       }

  		location /api/ {
			  proxy_pass http://localhost:8991/;
			  proxy_cookie_path /api/ /;
			  proxy_set_header   Referer $http_referer;
			  proxy_set_header   Cookie $http_cookie;
			  proxy_set_header  Host   $host:$server_port;
			  proxy_set_header  X-Real-IP   $remote_addr;
			  proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
			  proxy_set_header  X-Forwarded-Proto $scheme;
			
			  proxy_connect_timeout 300s;
			  proxy_send_timeout 300s;
			  proxy_read_timeout 300s;
       }

         location /ybss {
          proxy_pass http://localhost:8880/ybss;
			  proxy_cookie_path / /ybss;
			  proxy_set_header   Referer $http_referer;
			  proxy_set_header   Cookie $http_cookie;
			  proxy_set_header  Host   $host:$server_port;
			  proxy_set_header  X-Real-IP   $remote_addr;
			  proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
			  proxy_set_header  X-Forwarded-Proto $scheme;
			
			  proxy_connect_timeout 300s;
			  proxy_send_timeout 300s;
			  proxy_read_timeout 300s;
         error_page 404  http://jczl.igalaxycn.com:11122/ybss/;
       }

      location /jazs {
          proxy_pass http://localhost:8884/jazs;
			  proxy_cookie_path / /jazs;
			  proxy_set_header   Referer $http_referer;
			  proxy_set_header   Cookie $http_cookie;
			  proxy_set_header  Host   $host:$server_port;
			  proxy_set_header  X-Real-IP   $remote_addr;
			  proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
			  proxy_set_header  X-Forwarded-Proto $scheme;
			
			  proxy_connect_timeout 300s;
			  proxy_send_timeout 300s;
			  proxy_read_timeout 300s;
       }
       #匹配包含“diaowen”的路由并进行跳转*********************
       location /diaowen {
          proxy_pass http://172.16.16.171:8881/diaowen/;
			  proxy_cookie_path / /;
			  proxy_set_header   Referer $http_referer;
			  proxy_set_header   Cookie $http_cookie;
			  proxy_set_header  Host   $host:$server_port;
			  proxy_set_header  X-Real-IP   $remote_addr;
			  proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
			  proxy_set_header  X-Forwarded-Proto $scheme;
			
			  proxy_connect_timeout 300s;
			  proxy_send_timeout 300s;
			  proxy_read_timeout 300s;
         error_page 404  http://jczl.igalaxycn.com:11122/ybss/;
       }
	   location /ssp {
          proxy_pass http://172.16.16.251:8881/ssp;
		  #用于session存储，很重要 ，用于前后台分离的服务端部署
			  proxy_cookie_path /ssp /;
			  proxy_set_header   Referer $http_referer;
			  proxy_set_header   Cookie $http_cookie;
			  proxy_set_header  Host   $host:$server_port;
			  proxy_set_header  X-Real-IP   $remote_addr;
			  proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
			  proxy_set_header  X-Forwarded-Proto $scheme;
			
			  proxy_connect_timeout 300s;
			  proxy_send_timeout 300s;
			  proxy_read_timeout 300s;
       }
	   #创建“ssppc”目录并进行跳转************************
	   location /ssppc/ {
          proxy_pass http://localhost:8811/;
			  proxy_cookie_path /ssppc /;
			  proxy_set_header   Referer $http_referer;
			  proxy_set_header   Cookie $http_cookie;
			  proxy_set_header  Host   $host:$server_port;
			  proxy_set_header  X-Real-IP   $remote_addr;
			  proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
			  proxy_set_header  X-Forwarded-Proto $scheme;
			  proxy_connect_timeout 300s;
			  proxy_send_timeout 300s;
			  proxy_read_timeout 300s;
       }
       location /.well-known/acme-challenge/ {
           alias /var/www/challenges/;
           try_files $uri =404;
       }
	   

   }


ssppc************

server {
        listen       8811;#默认端口是80，如果端口没被占用可以不用修改
        server_name  localhost;
 
        #charset koi8-r;
 
        #access_log  logs/host.access.log  main;
        root        /usr/local/ssp-pc-vue/dist;#vue项目的打包后的dist
 
        location / {
            try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
            index  index.html index.htm;
        }
		
        #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
        #因此需要rewrite到index.html中，然后交给路由在处理请求资源
        location @router {
            rewrite ^.*$ /index.html last;
        }
        #.......其他部分省略
  }