首页 > 编程知识 正文

浅谈前后端分离中nginx的应用

时间:2023-05-06 14:26:02 阅读:245128 作者:4017

#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 80; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; #location / { # root html; # index index.html index.htm; #}###############ldweblocation / {proxy_pass http://127.0.0.1:8086;proxy_redirect off; proxy_set_header Some-Thing $http_x_custom_header; proxy_set_header Accept-Encoding 'gzip'; 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; client_max_body_size 2m; client_body_buffer_size 500k; proxy_buffer_size 128k; proxy_buffers 8 128k; proxy_busy_buffers_size 256k; proxy_temp_file_write_size 1024k;} ###############ldweb###############ldapilocation /firstvuelast/ {proxy_pass http://127.0.0.1:8001/firstvuelast/;proxy_redirect off; proxy_set_header Some-Thing $http_x_custom_header; proxy_set_header Accept-Encoding 'gzip'; 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; client_max_body_size 2m; client_body_buffer_size 500k; proxy_buffer_size 128k; proxy_buffers 8 128k; proxy_busy_buffers_size 256k; proxy_temp_file_write_size 1024k;} ###############ldapi#location ^~/proxy/html/{#rewrite ^/proxy/html/(.*)$ /$1 break;#proxy_pass http://localhost:8086;#} #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; # } #}}

下载nginx压缩包,然后解压,打开windows命令行控制台,然后进入到nginx解压缩的路径里面,然后启动nginx。输入

nginx start,看任务管理器里面的详细信息会看到有几个个nginx的进程。

 

然后我们打开

下图

在nginx.conf里面配置前后端的访问路劲,上面的ldweb代表前端的访问接口,ldapi代表后端的访问接口。前端我的ajax请求如下

onClickLast: function () { // 可选地,上面的请求可以这样做 axios.get('/firstvuelast/users/userlist', {dataType: 'jsonp'}) .then(function (response) { console.log(response.data) }) .catch(function (error) { console.log(error) }) }

我这个是访问后端的users/userlist路径下的方法

@RestController@RequestMapping(value = "/users")public class UserControler { @Autowired private UserService userService; @GetMapping("/userlist") public Result<User> selectUserList(HttpServletRequest request){ List<User> userList=userService.selectUserList(); return ResultUtil.success(userList); }}

控制台就可以打印出从后台获取的json值。

前端访问地址:http://localhost:8086/

后端访问地址:http://localhost:8081/firstvuelast/

前端访问的端口号是nginx的端口号80.

前后端现在都是监听nginx服务器,由nginx进行跨域请求访问

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。