如何配置nginx文件已达到nginx代理的vue项目访问到jar包形式的springboot工程?

Question

问题描述

自己写了个demo,想放到阿里云的服务器上跑,阿里云上的环境是用的镜像市场里的centos6.9+jdk8+nginx1.12.2,但是还预装了一个tomcat,他原先有的demo应该是vue放到nginx中,后端用的tomcat,而我的demo用的是springboot,以jar包形式打包,放到服务器上运行前端能访问,后端也能访问,但是两个交互一直是不行,所以不知道是nginx没配置好还是别的原因

问题出现的环境背景及自己尝试过哪些方法

1.不修改springboot的端口(8081),失败
2.停止tomcat服务,修改springboot端口(8080),失败

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
// 这个是nginx的默认配置文件
user www www;
worker_processes auto;

error_log /data/wwwlogs/error_nginx.log crit;
pid /var/run/nginx.pid;
worker_rlimit_nofile 51200;

events {
use epoll;
worker_connections 51200;
multi_accept on;
}

http {
include mime.types;
default_type application/octet-stream;
server_names_hash_bucket_size 128;
client_header_buffer_size 32k;
large_client_header_buffers 4 32k;
client_max_body_size 1024m;
client_body_buffer_size 10m;
sendfile on;
tcp_nopush on;
keepalive_timeout 120;
server_tokens off;
tcp_nodelay on;

fastcgi_connect_timeout 300;
fastcgi_send_timeout 300;
fastcgi_read_timeout 300;
fastcgi_buffer_size 64k;
fastcgi_buffers 4 64k;
fastcgi_busy_buffers_size 128k;
fastcgi_temp_file_write_size 128k;
fastcgi_intercept_errors on;

#Gzip Compression
gzip on;
gzip_buffers 16 8k;
gzip_comp_level 6;
gzip_http_version 1.1;
gzip_min_length 256;
gzip_proxied any;
gzip_vary on;
gzip_types

text/xml application/xml application/atom+xml application/rss+xml application/xhtml+xml image/svg+xml
text/javascript application/javascript application/x-javascript
text/x-json application/json application/x-web-app-manifest+json
text/css text/plain text/x-component
font/opentype application/x-font-ttf application/vnd.ms-fontobject
image/x-icon;

gzip_disable "MSIE [1-6].(?!.*SV1)";

#If you have a lot of static files to serve through Nginx then caching of the files' metadata (not the actual files' contents) can save some latency.
open_file_cache max=1000 inactive=20s;
open_file_cache_valid 30s;
open_file_cache_min_uses 2;
open_file_cache_errors on;

default

server {

listen 80;
server_name _;
access_log /data/wwwlogs/access_nginx.log combined;
root /data/wwwroot/default;
index index.html index.htm index.jsp;
#error_page 404 /404.html;
#error_page 502 /502.html;
location /nginx_status {
  stub_status on;
  access_log off;
  allow 127.0.0.1;
  deny all;
}
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|flv|mp4|ico)$ {
  expires 30d;
  access_log off;
}
location ~ .*\.(js|css)?$ {
  expires 7d;
  access_log off;
}
location ~ {
  proxy_pass http://127.0.0.1:8080;
  include proxy.conf;
}
location ~ /\.ht {
  deny all;
}

}

vhost

include vhost/*.conf;
}

你期待的结果是什么？实际看到的错误信息又是什么？

正常的结果应该是能交互,本地还没尝试nginx代理vue来访问后端,普通的功能比如登录,浏览器报错是
OPTIONS http://127.0.0.1:8081/login net::ERR_CONNECTION_REFUSED

Answer 1

你前端代码部署在哪里了没有说清楚，通过浏览器报的错猜测是你前端应用调用接口的地址是127.0.0.1。127.0.0.1指的是你电脑本机。你后台部署在阿里云上，那么这个地址怎么着也不可能是127.0.0.1了。所以你出问题的地方应该就是你前端调用api的地址有问题。