广告
返回顶部
首页 > 资讯 > 服务器 >Nginx跨域问题解析与解决
  • 615
分享到

Nginx跨域问题解析与解决

Nginx跨域Nginx跨域问题 2022-11-13 14:11:16 615人浏览 安东尼
摘要

目录什么是跨域跨域场景解决跨域的四种方式什么是跨域 域: 是指浏览器不能执行其他网站的脚本跨域: 它是由浏览器的 同源策略 造成的,是浏览器对 javascript 实施的安全限制,

什么是跨域

  • 域: 是指浏览器不能执行其他网站的脚本
  • 跨域: 它是由浏览器的 同源策略 造成的,是浏览器对 javascript 实施的安全限制,所谓同源(即指在同一个域)就是两个页面具有相同的协议 protocol,主机 host 和端口号 port 则就会造成 跨域

跨域场景

场景的跨域场景有哪些,请参考下表

当前url请求url是否跨域原因
Http://www.autofelix.cnhttp://www.autofelix.cn/api.PHP协议/域名/端口都相同
http://www.autofelix.cnhttps://www.autofelix.cn/api.php协议不同
http://www.autofelix.cnhttp://www.rabbit.cn主域名不同
http://www.autofelix.cnhttp://api.autofelix.cn子域名不同
http://www.autofelix.cn:80http://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跨域内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: Nginx跨域问题解析与解决

本文链接: https://www.lsjlt.com/news/171665.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Nginx跨域问题解析与解决
    目录什么是跨域跨域场景解决跨域的四种方式什么是跨域 域: 是指浏览器不能执行其他网站的脚本跨域: 它是由浏览器的 同源策略 造成的,是浏览器对 JavaScript 实施的安全限制,...
    99+
    2022-11-13
    Nginx 跨域 Nginx 跨域问题
  • Nginx解决跨域问题
    目录 前言 一、跨域问题 1.什么是跨域  2.CORS 二、Nginx跨域处理 三.补充 前言 这几天出现了一个问题,我们中的一个A系统需要给B系统调用,造成了跨域问题。 一、跨域问题 1.什么是跨域 当一个请求url的协议、域...
    99+
    2023-09-02
    nginx 服务器 开发语言
  • 使用Nginx解决跨域问题
    目录 使用Nginx解决跨域问题 1、修改浏览器、客户端访问地址 2、在nginx.conf配置文件需配置server 3、在Nginx中配置客户端访问的接口(按照规则或通配),并设置被代理的服务器 4、在Nginx中统一配置客户端访问的...
    99+
    2023-09-02
    nginx 运维 服务器
  • nginx 配置解决前端跨域问题
    一、为什么会出现跨域问题        出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策...
    99+
    2023-09-10
    前端 nginx 服务器
  • Nginx配置解决NetCore的跨域问题
    使用Nginx配置解决NetCore的跨域 废话不多说,直接上Nginx配置 server { listen 80; server_name 你的Id或域名;...
    99+
    2022-11-13
  • php、apache、nginx如何解决跨域问题
    这篇文章给大家分享的是有关php、apache、nginx如何解决跨域问题的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。apache:a. 首先确保加载了mod_headers模...
    99+
    2022-10-19
  • Java跨域问题分析与解决方法详解
    目录一、前言二、什么是跨域问题三、 为什么会出现跨域问题四、什么情况下会出现跨域五、如何解决跨域问题5.1 使用@CrossOrigin注解5.2 使用WebMvcConfigure...
    99+
    2023-05-20
    Java跨域问题原理 Java跨域问题解决方法 Java跨域问题
  • 如何使用Nginx解决跨域问题详解
    目录先来说一下什么是同源策略什么是跨域?跨域分类Nginx解决跨域问题解释1、Access-Control-Allow-Origin2、Access-Control-Allow-He...
    99+
    2022-11-13
  • Nginx 代理解决跨域问题多种情况分析
    何为跨域问题 跨域本人经过两天的磨练,大量地翻阅网上资料,通俗地讲,就是,同一ip,同一域名,不同端口下,需要互相访问,需要cookie的传递以及数据的获取。 一般在项目中,前后端完...
    99+
    2022-11-13
  • 解决nginx/apache静态资源跨域访问问题详解
    1. apache静态资源跨域访问 找到apache配置文件httpd.conf 找到这行 #LoadModule headers_module modules/mod_headers.so 把#注释符去掉 Load...
    99+
    2022-06-04
    nginx 跨域访问 apache 跨域访问 静态资源跨域访问
  • 怎么在nginx中解决cookie跨域访问问题
    怎么在nginx中解决cookie跨域访问问题?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。1nginx: [emerg] unknown directive ...
    99+
    2023-06-08
  • Nginx配置反向代理解决跨域问题
    通过Nginx配置反向代理结果跨域问题 第一步:下载Nginx 一、下载 官网下载地址:http://nginx.org/en/download.html 我下载的版本:http://nginx.or...
    99+
    2023-09-06
    nginx 服务器 运维
  • Nginx如何解决前端跨域问题以及CORS跨域配置
    Nginx如何解决前端跨域问题以及CORS跨域配置,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。Nginx的CORS配置,网上太多这配置了,但大家更多的复制粘贴...
    99+
    2023-06-04
  • nginx 解决跨域问题嵌入第三方页面
    目录前言 困难 跨域定义 nginx 的特性 反向代理 动静分离 尝试实现 最终效果 题外话 前言 我们自己的系统需要加载第三方系统中的一部分组件。计划的是第三方开发、提供相关接口...
    99+
    2022-11-12
  • Nginx跨域解决方案
    前置条件: 前端网站地址:http://localhost:4443 服务端网址:http://localhost:9081 当网站8080访问服务端接口的时候会产生跨域的问题 跨域主要设计到4个响应...
    99+
    2023-09-04
    服务器 前端 nginx
  • 解决Django cors跨域问题
    Django cors跨域问题 前后端分离项目中的跨域问题 即同源策略 同源策略:同源策略/SOP(Same origin policy)是一种约定,由 Netscape 公司 19...
    99+
    2022-11-12
  • 简析PHP跨域问题的解决方案
    本篇文章给大家带来了关于PHP面试的相关知识,其中主要给大家聊一聊PHP跨域问题的解决方案有哪些,感兴趣的朋友下面一起来看一下吧,希望对大家有帮助。设置允许访问的域名:1、允许全部的域名访问header("Access-Contr...
    99+
    2023-05-14
    跨域 php
  • VUE如何解决跨域问题
    这篇文章主要介绍“VUE如何解决跨域问题”,在日常操作中,相信很多人在VUE如何解决跨域问题问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”VUE如何解决跨域问题”的疑惑有所帮助!接下来,请跟着小编一起来学习吧...
    99+
    2023-07-02
  • ajax如何解决跨域问题
    小编给大家分享一下ajax如何解决跨域问题,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!跨域同源策略限制同源策略阻止从一个域上加...
    99+
    2022-10-19
  • 怎么解决ajax跨域问题
    本篇内容主要讲解“怎么解决ajax跨域问题”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么解决ajax跨域问题”吧!什么是ajax跨域ajax跨域的原理aja...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作