Nginx跨域问题解析与解决


Posted in Servers onAugust 05, 2022

什么是跨域

  • 域: 是指浏览器不能执行其他网站的脚本
  • 跨域: 它是由浏览器的 同源策略 造成的,是浏览器对 JavaScript 实施的安全限制,所谓同源(即指在同一个域)就是两个页面具有相同的协议 protocol,主机 host 和端口号 port 则就会造成 跨域

Nginx跨域问题解析与解决

跨域场景

场景的跨域场景有哪些,请参考下表

当前url 请求url 是否跨域 原因
http://www.autofelix.cn http://www.autofelix.cn/api.php 协议/域名/端口都相同
http://www.autofelix.cn https://www.autofelix.cn/api.php 协议不同
http://www.autofelix.cn http://www.rabbit.cn 主域名不同
http://www.autofelix.cn http://api.autofelix.cn 子域名不同
http://www.autofelix.cn:80 http://www.autofelix.cn:8080 端口不同

解决跨域的四种方式

  • nginx的反向代理
  • 使用 nginx 反向代理实现跨域,是最简单的跨域方式
  • 只需要修改 nginx 的配置即可解决跨域问题,支持所有浏览器,支持session,不需要修改任何代码,并且不会影响服务器性能
// nginx配置
server {
    listen       81;
    server_name  www.domain1.com;
    location / {
        proxy_pass   http://www.domain2.com:8080;  #反向代理
        proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名
        index  index.html index.htm;
        # 当用webpack-dev-server等中间件代理接口访问nignx时,此时无浏览器参与,故没有同源限制,下面的跨域配置可不启用
        add_header Access-Control-Allow-Origin http://www.domain1.com;  #当前端只跨域不带cookie时,可为*
        add_header Access-Control-Allow-Credentials true;
    }
}

jsonp请求

  • jsonp 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用,兼容性好 兼容低版本IE,缺点是只支持 get 请求,不支持 post 请求
  • 原理时网页通过添加一个 <script> 元素,向服务器请求 json 数据,服务器收到请求后,将数据放在一个指定名字的回调函数的参数位置传回来
//jquery实现
<script>
$.getJSON('http://autofelix.com/api.php&callback=?', function(res) {
     // 处理获得的数据
     console.log(res)
});
</script>
  • 后端语言代理
  • 可以通过一种没有跨域限制的语言中转一下,通过后端语言去请求资源,然后再返回数据
  • 比如 http://www.autofelix.cn 需要调用 http://api.autofelix.cn/userinfo 去获取用户数据,因为子域名不同,会有跨域限制
  • 可以先请求 http://www.autofelix.cn 下的 php 文件,比如 http://www.autofelix.cn/api.php,然后再通过该 php 文件返回数据
// api.php 文件中的代码
public function getCurl($url, $timeout = 5)
{
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_HEADER, 0);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_TIMEOUT, $timeout);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE);
    $result = curl_exec($ch);
    curl_close($ch);
    return $result;
}
$result = getCurl('http://api.autofelix.cn/userinfo');
return $result;
  • 后端语言的设置
  • 主要通过后端语言主动设置跨域请求,这里以 php 作为案例
// 允许所有域名访问
header('Access-Control-Allow-Origin: *');
// 允许单个域名访问
header('Access-Control-Allow-Origin: https://autofelix.com');
// 允许多个自定义域名访问
static public $originarr = [
   'https://autofelix.com',
   'https://baidu.com',
   'https://csdn.net',
];
// 获取当前跨域域名
$origin = isset($_SERVER['HTTP_ORIGIN']) ? $_SERVER['HTTP_ORIGIN'] : '';
if (in_array($origin, self::$originarr)) {
    // 允许 $originarr 数组内的 域名跨域访问
    header('Access-Control-Allow-Origin:' . $origin);
    // 响应类型
    header('Access-Control-Allow-Methods:POST,GET');
    // 带 cookie 的跨域访问
    header('Access-Control-Allow-Credentials: true');
    // 响应头设置
    header('Access-Control-Allow-Headers:x-requested-with,Content-Type,X-CSRF-Token');
}

到此这篇关于Nginx跨域问题解析与解决的文章就介绍到这了,更多相关Nginx跨域内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!


Tags in this post...

Servers 相关文章推荐
使用Apache的rewrite
Mar 09 Servers
详解Nginx 工作原理
Mar 31 Servers
nginx配置虚拟主机的详细步骤
Jul 21 Servers
Linux安装apache服务器的配置过程
Nov 27 Servers
nginx刷新页面出现404解决方案(亲测有效)
Mar 18 Servers
详解Nginx的超时keeplive_timeout配置步骤
May 25 Servers
利用nginx搭建RTMP视频点播、直播、HLS服务器
May 25 Servers
openEuler 搭建java开发环境的详细过程
Jun 10 Servers
Linux服务器离线安装 nginx的详细步骤
Jun 16 Servers
详解ZABBIX监控ESXI主机的问题
Jun 21 Servers
搭建zabbix监控以及邮件报警的超级详细教学
Jul 15 Servers
ubuntu20.04虚拟机无法上网的问题及解决
Dec 24 Servers
win10搭建配置ftp服务器的方法
Aug 05 #Servers
windows系统搭建WEB服务器详细教程
Aug 05 #Servers
Win10系统搭建ftp文件服务器详细教程
Aug 05 #Servers
Linux在两个服务器直接传文件的操作方法
Aug 05 #Servers
windows10 家庭版下FTP服务器搭建教程
Aug 05 #Servers
阿里云服务器(windows)手动部署FTP站点详细教程
Aug 05 #Servers
WIN10使用IIS部署ftp服务器详细教程
Aug 05 #Servers
You might like
PHP 杂谈《重构-改善既有代码的设计》之三 重新组织数据
2012/04/09 PHP
PHP面向对象的进阶学习(抽像类、接口、final、类常量)
2012/05/07 PHP
PHP实现UTF8二进制及明文字符串的转化功能示例
2017/11/20 PHP
获取网站跟路径的javascript代码(站点及虚拟目录)
2009/10/20 Javascript
javascript错误的认识不用关心内存管理
2012/12/15 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
2013/01/04 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
2013/01/27 Javascript
js简单实现HTML标签Select联动带跳转
2013/10/23 Javascript
eclipse导入jquery包后报错的解决方法
2014/02/17 Javascript
推荐5 个常用的JavaScript调试技巧
2015/01/08 Javascript
javascript实现获取浏览器版本、操作系统类型
2015/01/29 Javascript
javascript实现框架高度随内容改变的方法
2015/07/23 Javascript
基于jquery实现放大镜效果
2015/08/17 Javascript
基于Jquery插件实现跨域异步上传文件功能
2016/04/26 Javascript
浅析$.getJSON异步请求和同步请求
2016/06/06 Javascript
js判断手机系统是android还是ios
2017/03/07 Javascript
HTML5实现微信拍摄上传照片功能
2017/04/21 Javascript
Node.js安装配置图文教程
2017/05/10 Javascript
Node.js 使用流实现读写同步边读边写功能
2017/09/11 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
2018/07/03 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
2019/06/10 jQuery
layui表格 返回的数据状态异常的解决方法
2019/09/10 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
2019/11/12 Javascript
[01:19]DOTA2城市挑战赛报名开始 开启你的城市传奇
2018/03/23 DOTA
简单的Python的curses库使用教程
2015/04/11 Python
基于python 字符编码的理解
2017/09/02 Python
Pandas DataFrame数据的更改、插入新增的列和行的方法
2019/06/25 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
Keras:Unet网络实现多类语义分割方式
2020/06/11 Python
OpenCV+Python3.5 简易手势识别的实现
2020/12/21 Python
python爬取股票最新数据并用excel绘制树状图的示例
2021/03/01 Python
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
2021/03/05 HTML / CSS
Nordgreen台湾官网:极简北欧设计手表
2019/08/21 全球购物
团员个人年度总结
2015/02/26 职场文书
信息简报范文
2015/07/21 职场文书
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
2021/05/10 HTML / CSS