2019独角兽企业重金招聘Python工程师标准>>>

摘自《AngularJS深度剖析与最佳实践》P132

nginx配置文件如下:

server {listen 80;server_name your.domain.name;location / {# 把跟路径下的请求转发给前端工具链(如gulp)打开的开发服务器# 如果是产品环境,则使用root等指令配置为静态文件服务器proxy_pass http://localhost:5000/;}location /api/ {# 把 /api 路径下的请求转发给真正的后端服务器proxy_pass http://localhost:8080/service/;# 把host头传过去,后端服务程序将收到your.domain.name, 否则收到的是localhost:8080proxy_set_header Host $http_host;# 把cookie中的path部分从/api替换成/serviceproxy_cookie_path /api /service;# 把cookie的path部分从localhost:8080替换成your.domain.nameproxy_cookie_domain localhost:8080 your.domain.name         }}

配置完成后重启nginx服务:

nginx -s reload

flying get√ 总是要拼了命继续努力

目前很多网站都是用前后端完全分离的模式实现,即:后端通过API提供数据,前端使用API获取数据并渲染。不过这样做会存在API跨域的问题,这里介绍一种通过Nginx配置解决跨域问题的方法。

Nginx整体配置如下:

upstream service {server 127.0.0.1:8080;
}
map $http_origin $cors_header {default "";"~^https?://localhost(:[0-9]+)?$" "$http_origin";
}server {listen 80;server_name 127.0.0.1;access_log /var/log/nginx/access.log;error_log /var/log/nginx/error.log;location = /favicon.ico { deny all; error_log off; access_log off; log_not_found off; }location /api/ {if ($request_method = 'OPTIONS') {add_header 'Content-Length' 0 always;add_header 'Content-Type' 'text/plain charset=UTF-8' always;add_header 'Access-Control-Allow-Origin' '$cors_header' always;add_header 'Access-Control-Allow-Credentials' 'true' always;add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;add_header 'Access-Control-Allow-Headers' 'Origin,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Accept,Cookie,Set-Cookie, X-AUTH-USER, X-AUTH-TOKEN' always;return 200;}if ($request_method = 'POST') {add_header 'Access-Control-Allow-Origin' '$cors_header' always;add_header 'Access-Control-Allow-Credentials' 'true' always;add_header 'Access-Control-Allow-Headers' 'Origin,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Accept,Cookie,Set-Cookie, X-AUTH-USER, X-AUTH-TOKEN' always;add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;}if ($request_method = 'GET') {add_header 'Access-Control-Allow-Origin' '$cors_header' always;add_header 'Access-Control-Allow-Credentials' 'true' always;add_header 'Access-Control-Allow-Headers' 'Origin,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Accept,Cookie,Set-Cookie, X-AUTH-USER, X-AUTH-TOKEN' always;add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;}uwsgi_pass service;include uwsgi_params;}
}

API路径配置中的 "X-AUTH-USER, X-AUTH-TOKEN",是API中传递的自定义HEADER,需要在 "Access-Control-Allow-Headers"中指明。    其中,"map $http_origin $cors_header"将需要跨域的域名或者IP解析出来,方便后面的配置处理。

转载于:https://my.oschina.net/u/930306/blog/769840

nginx配置反向代理解决前后端分离跨域问题相关推荐

  1. 前后端分离跨域问题解决方案

    问题 因为最近在学习vue和springboot.用到了前后端分离.前端webpack打包运行的时候会启动nodejs的服务器占用8080端口,后端springboot自带tomcat启动占用1111 ...

  2. Springboot整合Shiro前后端分离跨域问题

    Springboot整合Shiro前后端分离跨域问题 前言:SpringBoot整合shiro进行前后端分离开发时(前端是Vue),项目做了跨域配置,但还是前端请求会出现cros err–显示的跨域问 ...

  3. 【python学习笔记】关于python Flask前后端分离跨域问题

    关于python Flask前后端分离跨域问题 前后端分离过程中,前后端对接测试难免遇到跨域问题.因为是个新司机,所以在我经过一天的测试,才找到解决办法=-= 第一种方法 from functools ...

  4. pc网站调用微服务器,【微服务】前后端分离-跨域问题和解决方案

    跨域问题存在的原因 跨域问题的根本原因:因为浏览器收到同源策略的限制,当前域名的js只能读取同域下的窗口属性.什么叫做同源策略?就是不同的域名, 不同端口, 不同的协议不允许共享资源的,保障浏览器安全 ...

  5. niginx反向代理解决前后端跨域问题

    1.代理和跨域 1.1 正向代理 1)用户希望代理服务器帮助其和要访问服务器之间实现通信,需要: a.用户IP报文的目的IP=代理服务器IP: b.用户报文端口号=代理服务器监听端口号: c.HTTP ...

  6. nginx处理前后端分离跨域问题

    在微服务中,通常会使用前后端分离的方式进行开发和部署.由于前后端分开部署,属于不同的"资源",因此前端调用后端API时可能会出现跨域问题,Cross-Origin Resource ...

  7. 使用nginx反向代理做前后端分离 上传大文件速度特别慢

    出现的问题 环境 VUE+JAVA 问题描述 在本地上传100MB+的文件速度特别快,基本上十几秒钟可以上传结束 但是上传到服务器后,需要5分钟以上,服务器带宽10MB(阿里云) 检查结果 经过多次检 ...

  8. 前后端分离跨域问题Access to XMLHttpRequest at ‘http://localhos...has been blocked by CORS policy: No ‘Access-

    完整报错如下: Access to XMLHttpRequest at 'http://localhost:8081/login' from origin 'http://localhost:8084 ...

  9. cors 前后端分离跨域问题_前后端分离之CORS跨域访问踩坑总结

    前言 前后端分离的开发模式越来越流行,目前绝大多数的公司与项目都采取这种方式来开发,它的好处是前端可以只专注于页面实现,而后端则主要负责接口开发,前后端分工明确,彼此职责分离,不再高度耦合,但是由于这 ...

最新文章

  1. python杀死线程的方法_python杀死一个线程的方法
  2. 前端参数无法转为后端实体内部类_Java学到什么程度才能叫精通?
  3. 在php中构造函数的作用,php构造函数的作用
  4. java中的ackerman_java8的函数式接口
  5. lg手机历史机型_LG手机业务亏损增加70% 宣称主因是国产品牌卖的太便宜
  6. spring cloud利用feign和sentinel进行内部或外部远程调用
  7. break continue
  8. 虚拟机的安装中遇到的问题(WIN10主机)
  9. Eclipse Code Template 设置自动加注释
  10. Android Weekly Notes Issue #232
  11. 在线使用matlab,MATLAB在线版本使用介绍
  12. js转换金额,元,万元
  13. 学生信息管理系统(Java+JSP+MySQL)
  14. 趣味数学--用1到9这九个数组成一个四位数乘以一位数等于四位数的等式,每个数只能用一次
  15. Excel数据可视化竟可以如此惊艳!数据可视化大屏制作
  16. 120.阿克曼(Ackmann)函数A(m,n)中,m,n定义域是非负整数(m<=3,n<=10),计算如下函数值
  17. Java模拟消息队列
  18. skyline R34与R35分类器---第一次尝试
  19. 2021年最新阿里面经分享,复盘我的阿里巴巴三轮技术面,希望对大家有帮助!
  20. 【Codeforces】764A Compote

热门文章

  1. php session mysql_php session mysql存储
  2. python 多维数组轴_python – numpy通过任意轴重塑多维数组
  3. spring3依赖包下载
  4. Hibernate配置属性详解
  5. K3 LEDE固件更改FRP客户端版本
  6. 使用VS2013在WIN8.1上运行gaclib的hello world
  7. 深入V8引擎-AST(2)
  8. 主体的实践,摘录-----保守还是改革,不是靠思辨的力量,而是靠实践
  9. 谷歌浏览器 自动保存数据后input的黄色背景 解决办法
  10. git 忽略文件不起作用