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代理,这样就能解决问题。
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。