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 配置 proxy_pass 后 返回404问题
Mar 31 Servers
nginx里的rewrite跳转的实现
Mar 31 Servers
如何在centos上使用yum安装rabbitmq-server
Mar 31 Servers
使用 Apache Superset 可视化 ClickHouse 数据的两种方法
Jul 07 Servers
Nginx源码编译安装过程记录
Nov 17 Servers
tomcat的catalina.out日志按自定义时间格式进行分割的操作方法
Apr 02 Servers
CentOS7安装GlusterFS集群以及相关配置
Apr 12 Servers
Windows Server 2012 修改远程默认端口3389的方法
Apr 28 Servers
windows server 2016 域环境搭建的方法步骤(图文)
Jun 25 Servers
windows server2008 开启端口的实现方法
Jun 25 Servers
apache虚拟主机配置的三种方式(小结)
Jul 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
php empty函数判断mysql表单是否为空
2010/04/12 PHP
PHP输入流php://input介绍
2012/09/18 PHP
WordPress中用于检索模版的相关PHP函数使用解析
2015/12/15 PHP
PHP设计模式入门之迭代器模式原理与实现方法分析
2020/04/26 PHP
JS 常用校验函数
2009/03/26 Javascript
input+select(multiple) 实现下拉框输入值
2009/05/21 Javascript
jQuery 加上最后自己的验证
2009/11/04 Javascript
JavaScript入门之基本函数详解
2011/10/21 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
2014/07/17 Javascript
一张Web前端的思维导图分享
2015/07/03 Javascript
jQuery fadeOut 异步实例代码详解
2016/08/18 Javascript
jQuery实现删除li节点的方法
2016/12/06 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
2017/02/08 Javascript
Bootstrap笔记之缩略图、警告框实例详解
2017/03/09 Javascript
JS对象的深度克隆方法示例
2017/03/16 Javascript
详解Vue2 SSR 缓存 Api 数据
2017/11/20 Javascript
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
2018/06/19 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
2019/10/25 Javascript
Vue数字输入框组件示例代码详解
2020/01/15 Javascript
基于JavaScript实现简单的轮播图
2021/03/03 Javascript
python爬取微信公众号文章
2018/08/31 Python
python 视频逐帧保存为图片的完整实例
2019/12/10 Python
PyTorch 解决Dataset和Dataloader遇到的问题
2020/01/08 Python
PyQt5.6+pycharm配置以及pyinstaller生成exe(小白教程)
2020/06/02 Python
如何基于Python代码实现高精度免费OCR工具
2020/06/18 Python
解决django migrate报错ORA-02000: missing ALWAYS keyword
2020/07/02 Python
通过实例解析Python RPC实现原理及方法
2020/07/07 Python
Python爬虫入门教程02之笔趣阁小说爬取
2021/01/24 Python
老生常谈CSS中的长度单位
2016/06/27 HTML / CSS
Html5+JS实现手机摇一摇功能
2015/04/24 HTML / CSS
施工员岗位职责
2014/03/16 职场文书
协议书模板
2014/04/23 职场文书
2015年学校管理工作总结
2015/07/20 职场文书
Golang数据类型和相互转换
2022/04/12 Golang