使用Nginx来解决跨域的问题
使用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来解决跨域的问题的更多相关文章
- 【Nginx】使用Nginx如何解决跨域问题?看完这篇原来很简单!!
写在前面 当今互联网行业,大部分Web项目基本都是采用的前后端分离模式.前端为H5项目,后端为Java.PHP.Python等项目.而且大部分后端服务并不会只部署一套服务,而是会采用Nginx对后端服 ...
- 一篇文章让你搞懂如何通过Nginx来解决跨域问题
Nginx跨域实现 首先大家要搞清楚什么是跨域,为什么会有跨域情况的出现.哪些情况属于跨域? 跨域:由于浏览器的同源策略,即属于不同域的页面之间不能相互访问各自的页面内容 注:同源策略,单说来就是 ...
- 使用nginx解决跨域问题(flask为例)
背景 我们单位的架构是在api和js之间架构一个中间层(python编写),以实现后端渲染,登录状态判定,跨域转发api等功能.但是这样一个中间会使前端工程师的工作量乘上两倍,原本js可以直接ajax ...
- 前端通过Nginx反向代理解决跨域问题
在前面写的一篇文章SpringMVC 跨域,我们探讨了什么是跨域问题以及SpringMVC怎么解决跨域问题,解决方式主要有如下三种方式: JSONP CORS WebSocket 可是这几种方式都是基 ...
- Nginx反向代理和Node.js后端解决跨域问题
最近在写自己的博客,涉及到跨域的问题,自己捣鼓许久,终于解决了.然后总结一下,记录一下,日后遇到类似的问题的时候也可以得到一些启发. 一.什么是跨域 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏 ...
- 利用nginx 反向代理解决跨域问题
说到nginx,不得不说真的很强大,也带来很多便利用于解决一些头疼的难题. 一般来说可以用来做:静态页面的服务器.静态文件缓存服务器.网站反向代理.负载均衡服务器等等,而且实现这一切,基本只需要改改那 ...
- nginx代理天地图做缓存解决跨域问题
作为一个GISer开发者,天地图是经常在项目中以底图的形式出现,其加载地址如: 天地图矢量:http://t{0-6}.tianditu.com/DataServer?T=vec_w&x={x ...
- vue cli 解决跨域 线上 nginx 反向代理配置
前后分离 axios 接 api 跨域问题如图: 解决办法: 1. npm start 本地开发环境解决: 在webpack配置文件 /config/index.js 里找到 proxyTable 开 ...
- 利用nginx解决跨域问题
访问我的博客 前言 最近遇到了跨域问题,结合之前[微信支付开发本地接收异步通知回调]的经验,利用 Nginx 实现了跨域. 公司之前为了解决跨域问题,用的是 iFrame,反正对于只做后端的我而言,觉 ...
随机推荐
- Intellij Idea乱码解决方案
使用Intellij Idea经常遇到的三种乱码问题: 1.工程代码乱码 2.main方法运行,控制台乱码 3.tomcat运行,控制台乱码 解决方案: 1.工程代码乱码 Settings > ...
- 【Mysql】mysql乐观锁总结和实践
乐观锁介绍: 乐观锁( Optimistic Locking ) 相对悲观锁而言,乐观锁假设认为数据一般情况下不会造成冲突,所以在数据进行提交更新的时候,才会正式对数据的冲突与否进行检测,如果发现冲突 ...
- Python 多线程、多进程 (三)之 线程进程对比、多进程
Python 多线程.多进程 (一)之 源码执行流程.GIL Python 多线程.多进程 (二)之 多线程.同步.通信 Python 多线程.多进程 (三)之 线程进程对比.多线程 一.多线程与多进 ...
- Docker 轻量级图形管理软件 Portainer
安装 docker swarm :https://www.cnblogs.com/klvchen/p/9437758.html portainer 集群启动 docker volume create ...
- git命令详解( 四 )
此篇为git命令详解的第四篇,话不多说,我们直接上知识点好吧 git Push 偏离的工作 gitPush: 此命令负责将你的变更上传到指定的远程仓库,并在远程仓库上合并你的新提交记录.一旦 git ...
- Kotlin入门(11)江湖绝技之特殊函数
上一篇文章介绍了Kotlin对函数的输入参数所做的增强之处,其实函数这块Kotlin还有好些重大改进,集中体现在几类特殊函数,比如泛型函数.内联函数.扩展函数.尾递归函数.高阶函数等等,因此本篇文章就 ...
- Redis系列(一):Redis的简介与安装
原文链接(转载请注明出处):Redis系列(一):Redis的简介与安装 什么是 Redis Redis 是一个使用ANSI C 编写的开源.支持网络协议.基于内存.可选持久性的键值对数据库,它是一个 ...
- HTTP的Referrer和Referrer Policy设置
Referrer referrer是HTTP请求header的报文头,用于指明当前流量的来源参考页面.通过这个信息,我们可以知道访客是怎么来到当前页面的.这对于Web Analytics非常重要,可以 ...
- Oracle EBS FA 获取累计折旧
FUNCTION get_ltd_deprn(p_asset_id IN NUMBER, p_book_type_code IN VARCHAR2, p_rate_source_rule IN VAR ...
- trap命令的实战用法
trap命令: trap命令是专用于捕捉信号的.比如像ctrl+c发送给终端的中断信号等等.在捕捉到信号之后,可以进行一系列的操作. 用法:trap 'COMMAND' INT COMMAND表示t ...