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对http请求处理的各个阶段详析
Mar 31 Servers
Apache Pulsar集群搭建部署详细过程
Feb 12 Servers
深入解析Apache Hudi内核文件标记机制
Mar 31 Servers
Nginx隐藏式跳转(浏览器URL跳转后保持不变)
Apr 07 Servers
nginx.conf配置文件结构小结
Apr 08 Servers
使用Nginx的访问日志统计PV与UV
May 06 Servers
在容器中使用nginx搭建上传下载服务器
May 11 Servers
详解ZABBIX监控ESXI主机的问题
Jun 21 Servers
win sever 2022如何占用操作主机角色
Jun 25 Servers
git中cherry-pick命令的使用教程
Jun 25 Servers
Nginx文件已经存在全局反向代理问题排查记录
Jul 15 Servers
Apache SkyWalking 监控 MySQL Server 实战解析
Sep 23 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
MYSQL数据库初学者使用指南
2006/11/16 PHP
php知道与问问的采集插件代码
2010/10/12 PHP
php数组操作之键名比较与差集、交集赋值的方法
2014/11/10 PHP
php隐藏IP地址后两位显示为星号的方法
2014/11/21 PHP
WordPress主题制作中自定义头部的相关PHP函数解析
2016/01/08 PHP
Laravel5中防止XSS跨站攻击的方法
2016/10/10 PHP
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
2010/06/28 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
2013/01/08 Javascript
用js实现小球的自由移动代码
2013/04/22 Javascript
js验证整数加保留小数点的简单实例
2013/12/02 Javascript
浅谈jQuery.easyui的datebox格式化时间
2015/06/25 Javascript
JQuery悬停控制图片轮播——代码简单
2015/08/05 Javascript
js上传图片预览的实现方法
2017/05/09 Javascript
Javascript快速实现浏览器系统通知
2017/08/26 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
2018/02/04 Javascript
Node.Js中实现端口重用原理详解
2018/05/03 Javascript
jQuery实现王者荣耀手风琴效果
2020/01/17 jQuery
在Angular中实现一个级联效果的下拉框的示例代码
2020/05/20 Javascript
Python实现登录人人网并抓取新鲜事的方法
2015/05/11 Python
详解Python中的元组与逻辑运算符
2015/10/13 Python
解决Python中字符串和数字拼接报错的方法
2016/10/23 Python
Python实现自定义函数的5种常见形式分析
2018/06/16 Python
django的聚合函数和aggregate、annotate方法使用详解
2019/07/23 Python
Python实用库 PrettyTable 学习笔记
2019/08/06 Python
python中时间转换datetime和pd.to_datetime详析
2019/08/11 Python
python中property和setter装饰器用法
2019/12/19 Python
HTML5 新标签全部总汇(推荐)
2016/06/13 HTML / CSS
捷克厨房用品购物网站:Tescoma
2018/07/13 全球购物
美国翻新电子产品商店:The Store
2019/10/08 全球购物
社区优秀志愿者材料
2014/02/02 职场文书
工作说明书格式
2014/07/29 职场文书
高一课前三分钟演讲稿
2014/09/13 职场文书
法院干警四风问题自我剖析材料
2014/09/29 职场文书
2014年妇委会工作总结
2014/12/10 职场文书
指导老师鉴定意见
2015/06/05 职场文书
2016继续教育培训学习心得体会
2016/01/19 职场文书