使用Nginx来解决跨域的问题

nginx的版本:(查看nginx命令: /usr/local/nginx/sbin/nginx -v)
nginx/1.4.3

问题是:前端项目域名是 a.xxxx.com, 后端的接口域名是 b.xxx.com,然后后端接口没有设置跨域相关的响应设置头,因此就接口和我们
域名就会存在跨域的情况,因此我们可以使用 nginx服务器来配置一下;

网上很多资料将 在nginx配置下 加如下代码就可以解决跨域的问题;

add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Methods GET,POST;

比如在nginx上如下配置:

server {
listen 443;
listen 80;
server_name b.xxx.com;
access_log /data/www/logs/nginx/access.log main; add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Methods GET,POST; include nginx_xxx.conf;
location / {
proxy_pass http://192.168.1.212:8136;
#proxy_pass http://xd-mfa-mng/;
include nginx_proxy.conf;
}
error_page 500 502 503 504 /502.html;
location = /50x.html {
oot html;
}
}

但是还是会存在跨域的情况,俗话说,梦想是美好的,但是现实很残酷的。因此我们需要指定 对应的域名就可以解决上面的跨域问题了

add_header Access-Control-Allow-Origin http://a.xxx.com; 

如上配置就可以使用nginx解决跨域的问题了;

因此代码变为如下:

server {
listen 443;
listen 80;
server_name b.xxx.com;
access_log /data/www/logs/nginx/access.log main; add_header Access-Control-Allow-Origin http://a.xxx.com;
add_header Access-Control-Allow-Credentials true; include nginx_xxx.conf;
location / {
proxy_pass http://192.168.1.212:8136;
#proxy_pass http://xd-mfa-mng/;
include nginx_proxy.conf;
}
error_page 500 502 503 504 /502.html;
location = /50x.html {
oot html;
}
}

注意:

1. Access-Control-Allow-Origin
服务器默认是不允许跨域的,给Nginx服务器配置 Access-Control-Allow-Origin *; 后的含义,表示服务器可以接受所有的请求源,即接受所有跨域的请求。但是这样设置在项目中并没有解决跨域,但是设置了具体的项目域名,比如 http://a.xxx.com 后,就可以跨域了;这有些不符合常理,但是情况确实如此;

使用Nginx来解决跨域的问题的更多相关文章

  1. 【Nginx】使用Nginx如何解决跨域问题?看完这篇原来很简单!!

    写在前面 当今互联网行业,大部分Web项目基本都是采用的前后端分离模式.前端为H5项目,后端为Java.PHP.Python等项目.而且大部分后端服务并不会只部署一套服务,而是会采用Nginx对后端服 ...

  2. 一篇文章让你搞懂如何通过Nginx来解决跨域问题

    Nginx跨域实现   首先大家要搞清楚什么是跨域,为什么会有跨域情况的出现.哪些情况属于跨域? 跨域:由于浏览器的同源策略,即属于不同域的页面之间不能相互访问各自的页面内容 注:同源策略,单说来就是 ...

  3. 使用nginx解决跨域问题(flask为例)

    背景 我们单位的架构是在api和js之间架构一个中间层(python编写),以实现后端渲染,登录状态判定,跨域转发api等功能.但是这样一个中间会使前端工程师的工作量乘上两倍,原本js可以直接ajax ...

  4. 前端通过Nginx反向代理解决跨域问题

    在前面写的一篇文章SpringMVC 跨域,我们探讨了什么是跨域问题以及SpringMVC怎么解决跨域问题,解决方式主要有如下三种方式: JSONP CORS WebSocket 可是这几种方式都是基 ...

  5. Nginx反向代理和Node.js后端解决跨域问题

    最近在写自己的博客,涉及到跨域的问题,自己捣鼓许久,终于解决了.然后总结一下,记录一下,日后遇到类似的问题的时候也可以得到一些启发. 一.什么是跨域 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏 ...

  6. 利用nginx 反向代理解决跨域问题

    说到nginx,不得不说真的很强大,也带来很多便利用于解决一些头疼的难题. 一般来说可以用来做:静态页面的服务器.静态文件缓存服务器.网站反向代理.负载均衡服务器等等,而且实现这一切,基本只需要改改那 ...

  7. nginx代理天地图做缓存解决跨域问题

    作为一个GISer开发者,天地图是经常在项目中以底图的形式出现,其加载地址如: 天地图矢量:http://t{0-6}.tianditu.com/DataServer?T=vec_w&x={x ...

  8. vue cli 解决跨域 线上 nginx 反向代理配置

    前后分离 axios 接 api 跨域问题如图: 解决办法: 1. npm start 本地开发环境解决: 在webpack配置文件 /config/index.js 里找到 proxyTable 开 ...

  9. 利用nginx解决跨域问题

    访问我的博客 前言 最近遇到了跨域问题,结合之前[微信支付开发本地接收异步通知回调]的经验,利用 Nginx 实现了跨域. 公司之前为了解决跨域问题,用的是 iFrame,反正对于只做后端的我而言,觉 ...

随机推荐

  1. Tomcat报failed to parse the expression [${xxx}]异常(javax.el.ELException)的解决方法

    Tomcat 7 'javax.el.ELException' 的解决方式tomcat 7对EL表达式的语法要求比较严格,例如"${owner.new}"因包含关键字new就会导致 ...

  2. Android开发day-01

    http://note.youdao.com/noteshare?id=b7f0d55c1e5eab20bb47e5c58e683611

  3. SQL Server 基本INSERT语句

    1.基本INSERT语句,单行插入 如果没有列出列,则使一一对应. 2.多行插入 3.INSERT INTO ... SELECT 语句 要插入的语句是从其他表中查询出来的. 注意:数据类型得相同或者 ...

  4. 关于Ajax的get与post浅分析,同步请求与异步请求,跨域请求;

    Ajax局部异步刷新全称ASynchronous JavaScript And XML.使用Javascript代码获取服务器的数据,Ajax当中有两个请求方法,一个是get方法,一个是post请求方 ...

  5. HTML命名规范

    一.关于选择器的命名   W3C CSS2.1的 4.1.3 节中提到:标识符(包括选择器中的元素名,类和ID)只能包含字符[a- zA-Z0-9]和ISO 10646字符编码U+00A1及以上,再加 ...

  6. Python中的基本数据类型的区别

    set集合和dict字典的区别 唯一区别: set没有对应的value值 相同点: 都无索引,不可进行切片和根据索引进行的操作 两者都是不可哈希的可变类型 两者的内部元素是可哈希的不可变类型 利用哈希 ...

  7. 关于wsgi协议的理解

    基础概念 首先要了解 WSGI 规范的概念,WSGI(Web Server Gateway Interface)规范描述了web server(Gunicorn,uWSGI等)如何与web appli ...

  8. [VUE ERROR] Error in render: "TypeError: Cannot create property 'header' on boolean 'true'"

    项目基于ElemnetUi进行的开发,在引入第三方扩展库 vue-element-extends 之后使用它的表格组件报了这个错 解决方案: 1.  删除项目中的 node_modules 2. 删除 ...

  9. Power BI 与 Azure Analysis Services 的数据关联:4、Power BI 连接到Azure Analysis Services 并展示

    Power BI 与 Azure  Analysis Services 的数据关联:4.Power BI 连接到Azure  Analysis Services 过使用服务器名称别名,用户可以使用较短 ...

  10. windows10不能获取有效IP的问题

    最近我的windows10系统一直不能有效获取IP地址(无论有线还是无线),但手工设置IP后又能正常上网,所以怀疑是某个服务未启动的原因. 查了一下百度,发现还真是,现将解决方案记录如下: 1.打开系 ...