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配置ssl实现https的方法示例
Mar 31 Servers
Nginx使用X-Accel-Redirect实现静态文件下载的统计、鉴权、防盗链、限速等
Apr 04 Servers
详解Apache SkyWalking 告警配置指南
Apr 22 Servers
Nginx+Tomcat负载均衡集群的实现示例
Oct 24 Servers
iSCSI服务器CHAP双向认证配置
Apr 01 Servers
Docker官方工具docker-registry案例演示
Apr 13 Servers
openstack云计算keystone组件工作介绍
Apr 20 Servers
腾讯云服务器部署前后分离项目之前端部署
Jun 28 Servers
Nginx文件已经存在全局反向代理问题排查记录
Jul 15 Servers
zabbix如何添加监控主机和自定义监控项
Aug 14 Servers
源码安装apache脚本部署过程详解
Sep 23 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 文章采集正则代码
2009/12/28 PHP
JS 网站性能优化笔记
2011/05/24 PHP
PHP中读写文件实现代码
2011/10/20 PHP
今天你说520了吗?不仅有php表白书还有java表白神器
2016/05/20 PHP
PHP+iframe图片上传实现即时刷新效果
2016/11/18 PHP
jQuery多条件筛选如何实现
2015/11/04 Javascript
vue项目tween方法实现返回顶部的示例代码
2018/03/02 Javascript
使用javascript函数编写简单银行取钱存钱流程
2018/05/26 Javascript
vue.js内置组件之keep-alive组件使用
2018/07/10 Javascript
JS中数据结构之栈
2019/01/01 Javascript
vue使用keep-alive保持滚动条位置的实现方法
2019/04/09 Javascript
Vue实现仿iPhone悬浮球的示例代码
2020/03/13 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
2020/04/06 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
2020/12/04 Vue.js
javascript实现拼图游戏
2021/01/29 Javascript
[48:45]Ti4 循环赛第二日 NEWBEE vs EG
2014/07/11 DOTA
[14:56]教你分分钟做大人:巫医
2014/10/30 DOTA
[01:32]DOTA2上海特锦赛现场采访:最想COS的英雄
2016/03/25 DOTA
详解Python编程中time模块的使用
2015/11/20 Python
浅谈flask源码之请求过程
2018/07/26 Python
十个Python练手的实战项目,学会这些Python就基本没问题了(推荐)
2019/04/26 Python
Python -m参数原理及使用方法解析
2020/08/21 Python
加拿大消费电子和手机购物网站:The Source
2017/01/28 全球购物
介绍一下Java的事务处理
2012/12/07 面试题
小学教师的个人自我鉴定
2013/10/24 职场文书
商务英语专业毕业生自荐信
2013/11/05 职场文书
毕业生怎样写好自荐信
2013/11/11 职场文书
创意活动策划书
2014/01/15 职场文书
旅游安全协议书
2014/04/21 职场文书
《秋游》教学反思
2014/04/24 职场文书
家长会演讲稿
2014/04/26 职场文书
教师节宣传方案
2014/05/23 职场文书
卖车协议书范例
2014/09/16 职场文书
合作经营协议书范本
2014/09/16 职场文书
值班管理制度范本
2015/08/06 职场文书
小学教师教学随笔
2015/08/14 职场文书