在之前的博客中提到了用nginx来处理前后端跨域问题,用Nginx代理请求,处理前后端跨域 ,虽然解决当时了问题,但是在实际使用中还是不好用,当时应对的只是对单接口的处理,如果一个页面需要调用两个不同接口(对应后台的不同工程)时候就出问题了。出现这种问题的原因跟后端开发人员工程混乱也有关系,比如a项目代码中处理了跨域,b项目在nignx代理上做了跨域处理。而我的处理办法是针对所有的请求在本地都添加 Access-Control-Allow-Origin 为 $http_origin (nignx特有字段,意思是请求域)字段到服务端,单独访问a项目是没问题的,如果在调用a项目的时候同时调用b项目就会报错,浏览器提示  Access-Control-Allow-Origin 字段被写了两次,报错类似下边:

Access to XMLHttpRequest at 'http://localhost:9090/getUser' from origin 'http://a.com' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values 'http://a.com, *, but only one is allowed.

  最简单粗暴的办法是针对后台接口每个做不同的处理,拜托,这tm太麻烦了。。。最后想到了一个问题,我可以用nginx把前端代码和后台代码代理到同一端口,这不就大功告成了吗。。。开始搞起来,nginx配置文件如下:

upstream test01{
server b.com; // 服务器a
} upstream test02{
server a.com; // 服务器b
} server {
listen 80; // 将前后端代理到同一端口
server_name localhost; location /user {
proxy_pass http://test01; // user接口
}
location /role{
proxy_pass http://test01; // role接口
} ... location / {
proxy_pass http://127.0.0.1:8080; // 前端工程地址,不能是localhost
}
}

  注意一个细节,我打注释的地方,必须为127.0.0.1,刚开始的时候我写的localhost,前端项目跑起来的后,访问 http://localhost ,发现本地静态js文件一直pending状态,过好长时间才能访问,这不能忍啊...为啥访问个本地文件都这么慢?难道是我开代理的问题吗?难道是本地hosts文件没有配置localhost吗?就差临门一脚了,就是用不了。。。过了好长时间,我偶然间将localhost修改为127.0.0.1,我重新跑起项目,哈,这酸爽....

  现在开发调试问题是解决了,但是强迫症的我,看着后台接口那一堆location很少头疼(代码中我用...省略了),于是我在想能不能把所有的接口地址写一块,省的写那么多相同的 proxy_pass http://test01; ,比如我说我要切换一台服务器测试,我得改那么多的proxy_pass 。。。

  最终我用正则改进了这种写法(有的人可能觉得之前的写法清晰,看个人喜好吧?我是强迫症忍不了啊 。。。),改完的配置如下,只需将后台接口location写到一块:

location ~ ^/(user|role|...) {
proxy_pass http://test01; // user接口
}

  

Nginx处理前端跨域(补充)的更多相关文章

  1. 【Nginx】在Windows下使用Nginx解决前端跨域问题

    提出问题:因为一些历史原因,后台代码不能动.请求别人的接口拿数据显示在前端,怎么办呢? 分析问题:通过ajax请求. 解决问题:因为浏览器的同源策略,所以需要解决跨域问题.(同源策略:请求的url地址 ...

  2. 如何用Nginx解决前端跨域问题?

    前言 在开发静态页面时,类似Vue的应用,我们常会调用一些接口,这些接口极可能是跨域,然后浏览器就会报cross-origin问题不给调. 最简单的解决方法,就是把浏览器设为忽略安全问题,设置--di ...

  3. 用nginx解决前端跨域问题

    假如前端你项目部署在nginx的根目录下,然后项目需要请求后台小伙伴写的接口 nginx配置: #user nobody; worker_processes 1; #error_log logs/er ...

  4. nginx解决前端跨域配置

    在nginx.conf文件中 添加如上配置: 在ajax中将原来的 url:http://192.168.1.127:8905/findItem 改成:'http://localhost/findIt ...

  5. 用nginx的反向代理机制解决前端跨域问题在nginx上部署web静态页面

    用nginx的反向代理机制解决前端跨域问题在nginx上部署web静态页面 1.什么是跨域以及产生原因 跨域是指a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,或是a页面为ip地 ...

  6. 项目部署问题:xftp无法连接服务器、Nginx403 Forbidden解决、nginx反向代理解决前端跨域问题

    一.xftp无法连接服务器 在xftp中配置正确的ip,用户名和密码后,居然无法连接 解决方案:将协议里面的FTP换成SFTP,注意换成SFTP后端口就默认换成22,要还是原来的21就还是连不上的哈 ...

  7. 前端跨域实现的几种方式?及使用Nginx反向代理配置。

    早期为了防止CSRF(跨域请求伪造)的攻击,浏览器引入了同源策略(SOP)来提高安全性.而所谓"同源策略",即同域名(domain或ip).同端口.同协议的才能互相获取资源,而不能 ...

  8. 使用Nginx来解决跨域的问题

    使用Nginx来解决跨域的问题 nginx的版本:(查看nginx命令: /usr/local/nginx/sbin/nginx -v) nginx/1.4.3 问题是:前端项目域名是 a.xxxx. ...

  9. 使用nginx实现浏览器跨域请求

    跨域访问问题, 相信很多人都遇到过, 并且都用不同的办法去解决过. 方法有很多种, 不一一叙述了. 这里主要使用nginx反向代理来解决跨域问题. 啥是跨域? 假如你是百度开发人员, 在百度页面去请求 ...

随机推荐

  1. HTML和CSS遇到的细节问题

    一.列表项标记窜出div盒子 列表项标记窜出盒子,是因为设置了 *; } ,消除了<li>元素的默认外边距. 结解决方法:消除*{}选择器或是设置外边距 列表项目标记与边距有关 二.div ...

  2. Python Flask框架入门

    序言 Flask封装功能不及Django完善,性能不及Tornado,但是Flask的第三方开源组件比丰富. 如果你是一个追求极简风格的完美主义者,那么Flask适合你. 资料

  3. POJ 3280 Cheapest Palindrome ( 区间DP && 经典模型 )

    题意 : 给出一个由 n 中字母组成的长度为 m 的串,给出 n 种字母添加和删除花费的代价,求让给出的串变成回文串的代价. 分析 :  原始模型 ==> 题意和本题差不多,有添和删但是并无代价 ...

  4. kibana的安装和监控

    1.1:kibana搭建 kibana只需要在一台机器安装即可 1):解压 tar -zxvf kibana-5.5.2-linux-x86_64.tar.gz -C /home/angel/serv ...

  5. 【转】结构化日志类库 ---- Serilog库

    源地址:https://www.cnblogs.com/mq0036/p/8479956.html 解决异常: Invalid cast from 'System.String' to 'Serilo ...

  6. How to run a function when the page is loaded?

    How to run a function when the page is loaded? window.onload = codeAddress; should work - here's a d ...

  7. PCIE手札

    PCIE兼容了大部分PCI总线的特性,区别在于使用串行差分总线代替了并行总线,并实现了协议分层.PCIE的带宽与LANE数量和时钟频率相关,时钟频率支持2.5G和5G,Lane支持x1/x2/x4/x ...

  8. Java的参数传递是值传递?

    引用传递和值传递的区别.(不先说定义的都是在耍流氓!) 按值调用(call by value) : 在参数传递过程中,形参和实参占用了两个完全不同的内存空间.形参所存储的内容是实参存储内容的一份拷贝. ...

  9. 模拟赛DAY1 T1大美江湖

    这就是一个模拟题,注意1234分别对应左右上下横坐标和纵坐标的判断就好了 题解: 需要注意的是,向上取整ceil函数是对于一个double值返回一个double值,也就是说在ceil里面的类型一定要是 ...

  10. html常见兼容性问题?

    1.双边距BUG float引起的  使用display 2.3像素问题 使用float引起的 使用dislpay:inline -3px 3.超链接hover 点击后失效  使用正确的书写顺序 li ...