vue项目本地开发使用Nginx配置代理后端接口问题

这篇文章主要介绍了vue项目本地开发使用Nginx配置代理后端接口问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

使用Nginx配置代理后端接口

nginx的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; server { listen       8088; server_name  localhost; #charset koi8-r; #access_log  logs/host.access.log  main; location / { proxy_pass  http://127.0.0.1:9528; } location /dev/api/ { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods 'GET,POST,OPTIONS,PUT,DELETE'; add_header Access-Control-Allow-Headers 'Token,DNT,X-Mx-ReqToken,keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization'; proxy_pass  https://www.xxxx:5002/api/;  #这里填上服务器地址 } #location / { #  try_files $uri $uri/ /index.html; #} #error_page  404   /404.html; # redirect server error pages to the static page /50x.html # error_page   500 502 503 504  /50x.html; #location = /50x.html { #    root   html; #} # proxy the PHP scripts to Apache listening on 127.0.0.1:80 # #location ~ \.php$ { #    proxy_pass   http://127.0.0.1; #} # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 # #location ~ \.php$ { #    root           html; #    fastcgi_pass   127.0.0.1:9000; #    fastcgi_index  index.php; #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name; #    include        fastcgi_params; #} # deny access to .htaccess files, if Apache's document root # concurs with nginx's one # #location ~ /\.ht { #    deny  all; #} } # another virtual host using mix of IP-, name-, and port-based configuration # #server { #    listen       8000; #    listen       somename:8080; #    server_name  somename  alias  another.alias; #    location / { #        root   html; #        index  index.html index.htm; #    } #} # HTTPS server # #server { #    listen       443 ssl; #    server_name  localhost; #    ssl_certificate      cert.pem; #    ssl_certificate_key  cert.key; #    ssl_session_cache    shared:SSL:1m; #    ssl_session_timeout  5m; #    ssl_ciphers  HIGH:!aNULL:!MD5; #    ssl_prefer_server_ciphers  on; #    location / { #        root   html; #        index  index.html index.htm; #    } #} }

然后浏览器输入http://localhost:8088 打开项目，看下接口是否调成功；

关于Nginx代理前后端接口

最近在开发公司的前后端分离的项目，前端使用Vue,后端使用SpringBoot,本来我是想用Vue的代理功能，去请求后端接口，但是不知道死活代理不同。

proxy: {     '/api': {          target: 'http://127.0.0.1:8981/api/',           pathRewrite: {         '^/api': '/'    } }

这样的写法各种出现问题，比如404等问题。

后来问了一下我们公司的老员工，他说现在不建议这么配。直接用Nginx代理前后端就好。

# 代理前端的地址 location /data-pages {     proxy_pass  http://localhost:8021/data-pages/; } # 代理后端地址 location /api/ {     proxy_pass http://localhost:28090/api/; }

之前我想的是，Vue用的是8021端口，所以后端请求过去就会变成 http://localhost:8021/api/,但是其实不是这样的。后端地址是看浏览器中的url然后拼接过去的。所以经过Nginx代理之后，后端的接口也能通过Nginx代理，这样就能解决问题。