nginx前后端分离解决跨域问题
本篇内容主要讲解“nginx前后端分离解决跨域问题”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“nginx前后端分离解决跨域问题”吧!
创新互联建站是一家专业提供喀什企业网站建设,专注与网站制作、成都网站制作、H5网站设计、小程序制作等业务。10年已为喀什众多企业、政府机构等服务。创新互联专业的建站公司优惠进行中。
场景
适用于公司有前端,项目采用前后端分离。类似于我们 后端 springboot 提供接口,前端专门写html调用相应的接口,解决跨域问题
配置说明
worker_processes 1; events { worker_connections 10240; } http { include mime.types; default_type application/octet-stream; client_max_body_size 200M; client_header_buffer_size 8k; large_client_header_buffers 8 16k; 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 on; sendfile on; keepalive_timeout 300; gzip on; gzip_http_version 1.0; gzip_disable "MSIE [1-6]."; gzip_types text/plain application/x-javascript text/css text/javascript; server { listen 80; server_name localhost; client_header_buffer_size 8k; large_client_header_buffers 8 16k; root /usr/share/nginx/html; location / { # 把跟路径下的请求转发给前端工具链(如gulp,webstorm,anywhere)打开的开发服务器 # 如果是产品环境,则使用root等指令配置为静态文件服务器 # proxy_pass http://localhost:80; #proxy_redirect default; } location /management/ { # 把 /api 路径下的请求转发给真正的后端服务器 proxy_pass http://192.168.199.131:8090/management/; proxy_cookie_path /management/ /; proxy_set_header Host $host; proxy_set_header Cookie $http_cookie; proxy_set_header Remote_Addr $remote_addr; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; client_max_body_size 200m; proxy_connect_timeout 18000; proxy_send_timeout 18000; proxy_read_timeout 18000; } location /agents/ { proxy_pass http://192.168.199.131:8092/; proxy_cookie_path /agents/ /; proxy_set_header Host $host; proxy_set_header Cookie $http_cookie; proxy_set_header Remote_Addr $remote_addr; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; client_max_body_size 200m; proxy_connect_timeout 18000; proxy_send_timeout 18000; proxy_read_timeout 18000; } } }
重点说明 location
的配置 。
比如前端html请求地址 http://localhost:80/index.html
前端调用接口的地址为 http://localhost:80/api 其实api并不在改域下,在http://192.168.199.111:8888/ 下 则需要解决2个问题 前端ajax跨域与接口转发到相应位置
** 着重看 1 2 3 **
location /api/ { // 1 proxy_pass http://192.168.199.111:8888/; // 2 proxy_cookie_path /api/ /; // 3 proxy_set_header Host $host; proxy_set_header Cookie $http_cookie; // 发送cookie 解决 session 一致性问题 proxy_set_header Remote_Addr $remote_addr; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; client_max_body_size 200m; proxy_connect_timeout 18000; proxy_send_timeout 18000; proxy_read_timeout 18000; } }
到此,相信大家对“nginx前后端分离解决跨域问题”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
本文标题:nginx前后端分离解决跨域问题
网页地址:http://scyanting.com/article/podjdi.html