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基于域名,端口,不同IP的虚拟主机设置的实现
Mar 31 Servers
Nginx 过滤静态资源文件的访问日志的实现
Mar 31 Servers
JVM上高性能数据格式库包Apache Arrow入门和架构详解(Gkatziouras)
May 26 Servers
Nginx location 和 proxy_pass路径配置问题小结
Sep 04 Servers
关于Nginx中虚拟主机的一些冷门知识小结
Mar 03 Servers
Dashboard管理Kubernetes集群与API访问配置
Apr 01 Servers
HDFS免重启挂载新磁盘
Apr 06 Servers
Nginx禁止ip访问或非法域名访问
Apr 07 Servers
tomcat正常启动但网页却无法访问的几种解决方法
May 06 Servers
Windows Server 2022 超融合部署(图文教程)
Jun 25 Servers
Nginx如何配置多个服务域名解析共用80端口详解
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
php中使用addslashes函数报错问题的解决方法
2013/02/06 PHP
PHP变量内存分配问题记录整理
2013/11/27 PHP
PHP实现微信模拟登陆并给用户发送消息的方法【文字,图片,图文】
2017/06/29 PHP
Laravel 修改验证异常的响应格式实例代码详解
2020/05/25 PHP
JavaScript脚本语言在网页中的简单应用
2007/05/13 Javascript
js loading加载效果实现代码
2009/11/24 Javascript
Javascript倒计时代码
2010/08/12 Javascript
统计jQuery中各字符串出现次数的工具
2012/05/03 Javascript
javascript中的void运算符语法及使用介绍
2013/03/10 Javascript
javascript判断数组内是否重复的方法
2015/04/21 Javascript
js动态获取子复选项并设计全选及提交的实现方法
2016/06/24 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
2018/02/10 Javascript
Vue中对比scoped css和css module的区别
2018/05/17 Javascript
vue-cli3配置favicon.ico和title的流程
2020/10/27 Javascript
[14:21]VICI vs EG (BO3)
2018/06/07 DOTA
python中元类用法实例
2014/10/10 Python
Python中用于计算对数的log()方法
2015/05/15 Python
深入解析Python中的list列表及其切片和迭代操作
2016/03/13 Python
Django使用httpresponse返回用户头像实例代码
2018/01/26 Python
关于Python的一些学习总结
2018/05/25 Python
Python设计模式之建造者模式实例详解
2019/01/17 Python
Python通用函数实现数组计算的方法
2019/06/13 Python
python 用户交互输入input的4种用法详解
2019/09/24 Python
Python中顺序表原理与实现方法详解
2019/12/03 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
HTML5 3D衣服摇摆动画特效
2016/03/17 HTML / CSS
移动HTML5前端框架—MUI的使用
2017/12/18 HTML / CSS
详解快速开发基于 HTML5 网络拓扑图应用
2018/01/08 HTML / CSS
美国益智玩具购物网站:Fat Brain Toys
2017/11/03 全球购物
巴西男士胡须和头发护理产品商店:Beard
2017/11/13 全球购物
银行办公室岗位职责
2014/03/10 职场文书
《长城和运河》教学反思
2014/04/14 职场文书
酒店员工培训方案
2014/06/02 职场文书
专题组织生活会方案
2014/06/15 职场文书
药剂专业自荐书
2014/06/20 职场文书
胡雪岩故居导游词
2015/02/06 职场文书