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前后端分离解决跨域问题”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！