nginx前后端分离解决跨域问题

本篇内容主要讲解"nginx前后端分离解决跨域问题"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"nginx前后端分离解决跨域问题"吧!

场景

1. 适用于公司有前端，项目采用前后端分离。类似于我们 后端 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前后端分离解决跨域问题"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！