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 相关文章推荐
Nginx解决前端访问资源跨域问题的方法详解
Mar 31 Servers
制作能在nginx和IIS中使用的ssl证书
Jun 21 Servers
nginx结合openssl实现https的方法
Jul 25 Servers
教你利用Nginx 服务搭建子域环境提升二维地图加载性能的步骤
Sep 25 Servers
Apache Hudi集成Spark SQL操作hide表
Mar 31 Servers
Minikube搭建Kubernetes集群
Mar 31 Servers
配置Kubernetes外网访问集群
Mar 31 Servers
Windows server 2012 R2 安装IIS服务器
Apr 29 Servers
Apache POI操作批量导入MySQL数据库
Jun 21 Servers
Linux中sftp常用命令整理
Jun 28 Servers
nginx代理实现静态资源访问的示例代码
Jul 07 Servers
nginx七层负载均衡配置详解
Jul 15 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 八种基本的数据类型小结
2011/06/01 PHP
PHP高级对象构建 多个构造函数的使用
2012/02/05 PHP
win7 64位系统 配置php最新版开发环境(php+Apache+mysql)
2014/08/15 PHP
PHP错误Warning: Cannot modify header information - headers already sent by解决方法
2014/09/27 PHP
PHP模拟asp.net的StringBuilder类实现方法
2015/08/08 PHP
PHP会话处理的10个函数
2015/08/11 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
php实现按天数、星期、月份查询的搜索框
2016/05/02 PHP
PHP多进程之pcntl_fork的实例详解
2017/10/15 PHP
JS JavaScript获取Url参数,src属性参数
2021/03/09 Javascript
JMenuTab简单使用说明
2008/03/13 Javascript
javascript写的日历类(基于pj)
2010/12/28 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
js简单实现标签云效果实例
2015/08/06 Javascript
谈一谈jQuery核心架构设计
2016/03/28 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
Javascript农历与公历相互转换的简单实例
2016/10/09 Javascript
Bootstrap源码解读表单(2)
2016/12/22 Javascript
vuex state及mapState的基础用法详解
2018/04/19 Javascript
详解Vue源码学习之callHook钩子函数
2018/07/25 Javascript
vue的滚动条插件实现代码
2019/09/07 Javascript
[58:57]2018DOTA2亚洲邀请赛3月29日小组赛B组 Effect VS VGJ.T
2018/03/30 DOTA
Python时间戳使用和相互转换详解
2017/12/11 Python
详解Python计算机视觉 图像扭曲(仿射扭曲)
2019/03/27 Python
TensorFlow keras卷积神经网络 添加L2正则化方式
2020/05/22 Python
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
不用游标的SQL语句有哪些
2012/09/07 面试题
大学生毕业求职的自我评价
2013/09/29 职场文书
医学生实习自荐信
2013/10/01 职场文书
暑期实习鉴定
2013/12/16 职场文书
竞选劳动委员演讲稿
2014/04/28 职场文书
大学生职业生涯十年规划书范文
2014/09/17 职场文书
工作调动申请报告
2015/05/18 职场文书
幽默导游词开场白
2015/05/29 职场文书
2019年思想汇报
2019/06/20 职场文书
错误码NET::ERR_CERT_DATE_INVALID证书已过期解决方法?
2022/07/07 数码科技