Nginx跨域问题解析与解决

2024-12-14 10:11:08

什么是跨域

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

跨域场景

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

当前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跨域内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

如何使用Nginx解决跨域问题详解

目录先来说一下什么是同源策略什么是跨域? 跨域分类 Nginx解决跨域问题解释 1.Access-Control-Allow-Origin 2.Access-Control-Allow-Headers 是为了防止出现以下错误: 3.Access-Control-Allow-Methods 是为了防止出现以下错误: 4.给OPTIONS 添加 204的返回,是为了处理在发送POST请求时Nginx依然拒绝访问的错误预检请求(preflight request) 尾声先来说一下什么是同源策
如何利用map实现Nginx允许多个域名跨域

常见的 Nginx 配置允许跨域 server { listen 11111; server_name localhost; location ~ /xxx/xx { if ($request_method = 'OPTIONS') { return 204; } add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; add_header Ac
nginx 解决跨域问题嵌入第三方页面

目录前言困难跨域定义 nginx 的特性反向代理动静分离尝试实现最终效果题外话前言我们自己的系统需要加载第三方系统中的一部分组件.计划的是第三方开发.提供相关接口,我们通过接口获取到数据,然后,再用这些数据在我们系统中吧相关的功能实现了可惜的是,领导没有协调下来.正规的途径搞不定,那就需要花式整活了前面也说了,我们走接口拉数据重新渲染,这样的玩法是比较常规的,缺点是需要重新去实现相关模块,还需要对方开放接口. 现在只能走非正常渠道,比如,容易想到的,就是我们直接把页面嵌
Nginx解决前端访问资源跨域问题的方法详解

被前端跨域问题折磨快2天后,终于用ngnx的方式解决了,所以在此总结下. 该篇只探讨如何用Ngnx解决跨域问题,对于原理不作讨论. 1.首先介绍Windows环境下Nignx的相关命令操作 nginx常用命令: 验证配置是否正确: nginx -t 查看Nginx的版本号:nginx -V 启动Nginx:start nginx 快速停止或关闭Nginx:nginx -s stop 正常停止或关闭Nginx:nginx -s quit 配置文件修改重装载命令:nginx -s reload 在停
利用Nginx代理如何解决前端跨域问题详析

前言 Nginx(发音同"engine X")是异步框架的网页服务器,也可以用作反向代理.负载平衡器和HTTP缓存. 本文将讲述如何使用 Nginx 在 Web 前后端分离开发中实现路由的转发. Web 开发通常使用的是前后端分离的开发模式,即前端和后端分别进行开发,前端通过 Ajax 请求后端的接口,将获取数据将数据渲染到页面上.前端开发会使用脚手架搭建前端开发环境,其底层通常会启动一个本地服务器,通常使用的是 nodejs 的 Express 框架.而后端则是提供接口,一般是放在线
Nginx配置解决NetCore的跨域问题

使用Nginx配置解决NetCore的跨域废话不多说,直接上Nginx配置 server { listen 80; server_name 你的Id或域名; location / { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods 'GET,POST,PUT,DELETE,PATCH,OPTIONS'; add_header Access-Control-Allow-Header
通过Nginx代理转发配置实现跨域的方法（API代理转发）

前言在WEB开发中,我们经常涉及到跨域的请求,解决跨域问题的方式有很多,比如有window.name.iframe.JSONP.CORS等等,就不详细展开了,涉及到协议.端口不一样的跨域请求方式是采用代理,这里我们重点聊聊Nginx代理的方式. 场景本地启动了一个前后端分离的WEB应用,端口为:3000,可以通过http://127.0.0.1:3000访问前端页面,页面中有些Ajax请求的地址为http://127.0.0.1:3000/api/getList,一般情况下肯定是404或
Nginx 代理解决跨域问题多种情况分析

何为跨域问题跨域本人经过两天的磨练,大量地翻阅网上资料,通俗地讲,就是,同一ip,同一域名,不同端口下,需要互相访问,需要cookie的传递以及数据的获取. 一般在项目中,前后端完全分离,因此访问的端口号不同,比如:localhost:8090(前端)发送到localhost:8001(后端)请求数据,此时前后端就出现了跨域问题.下面紧接着给大家介绍Nginx 代理解决跨域问题分析,内容如下所示: 当你遇到跨域问题,不要立刻就选择复制去尝试.请详细看完这篇文章再处理 .我相信它能帮到你. 分析
Nginx跨域问题解析与解决

目录什么是跨域跨域场景解决跨域的四种方式什么是跨域域: 是指浏览器不能执行其他网站的脚本跨域: 它是由浏览器的同源策略造成的,是浏览器对 JavaScript 实施的安全限制,所谓同源(即指在同一个域)就是两个页面具有相同的协议 protocol,主机 host 和端口号 port 则就会造成跨域跨域场景场景的跨域场景有哪些,请参考下表当前url 请求url 是否跨域原因 http://www.autofelix.cn http://www.autofelix.cn/a
springboot 设置CorsFilter跨域不生效的解决

目录设置CorsFilter跨域不生效的解决问题描述解决方案跨域配置CorsFilter不生效原因 order的规则设置CorsFilter跨域不生效的解决问题描述公司的前后端开发项目工程,在本地调试的时候遇到了跨域的问题,同事调我的服务一直提示跨域问题,然后前端nb他自己在哪里做了跨域处理,类似nginx那种,但是我还是百度去看了一下,在一个大佬的博客中发现了解决方案. 问题原因是是写的判断登录的filter影响了登录,原因是的这个filter执行顺序在corsfilter之前导
跨域请求的完美解决方法(JSONP, CORS)

一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题.解决方法有JSONP,Flash等等. JSONP 我们发现,Web页面上调用js文件时不受是否跨域的影响,凡是拥有"src"这个属性的标签都拥有跨域的能力,比如<script>.<img>.<iframe>.那就是说如果要跨域访问数据,就服务端只能把数据放在js格式的文件里.恰巧我们知道JSON可以简洁的描述复杂数据,而且JSON还被js原生支持,所以在客户端几乎可以随心所欲的处
IE9 IE8 ajax跨域问题的快速解决方法

网上解决办法均是在发起请求之前添加 jQuery.support.cors=true;但是,线下测试,是ok的,一放到服务器上,又出现了新的eroor:readyState: 0, status: 0, statusText: "Error: 拒绝访问... 最后,问题是这样解决的,点击IE浏览器的的"工具->Internet 选项->安全->自定义级别"将"其他"选项中的"通过域访问数据源"选中为"启用&
React+Spring实现跨域问题的完美解决方法

最近小编在学习react,在学习过程中遇到React+Spring实现跨域问题,下面小编记录了整个问题过程,给大家做个参考. react 跨域访问后台,默认是有跨域问题,并且火弧和谷歌浏览器,对跨域问题展示还不一样. 谷歌浏览器如下图: 此处状态是200,然而在Response却没有任何信息,如下图然而火弧浏览器,对该问题的描述,就清淅得多, 火弧浏览器告诉我们,跨域了,关于react跨域的帖子,网上也有相关帖子,搜索到的方法,大约都是如下解决方式: 如果你是通过creat-react-app
Vue中跨域及打包部署到nginx跨域设置方法

众所周知,我们在做前后端分离项目的时候,经常需要在本地起前端工程,接口希望拉取服务端的实际数据而不是本地的mock数据,而如果本地程序直接访问远程接口, 肯定会遇到跨域问题. 什么是跨域?实现跨域的多种方式? 这里我就不详细介绍了,大家自行百度哈为什么要实现前端跨域一般来讲,前后端分离的项目在大公司都会由后台设置允许跨域访问,因为后台设置允许跨域是很简单和方便的,但是某些情况下,一些小公司或者你工作的场所后台不怎么配合的情况下,这就需要前端来配置跨域请求来方便我们使用接口 vue项目中的配置
nginx安装完成无法解析php解决方法

目录方法一方法二安装完成nginx后,发现无法解析php代码,现在解决方案如下方法一找到nginx配制文件,如图下添加配制(截图画出来的),我的配制文件位置是/etc/nginx/sites-available/default location ~ \.php$ { root /var/www/html; include snippets/fastcgi-php.conf; fastcgi_pass 127.0.0.1:9000; fastcgi_param SCRIPT_FILEN
Nginx跨域设置Access-Control-Allow-Origin无效的解决办法

nginx 版本 1.11.3 使用大家说的以下配置,验证无效,跨域问题仍然存在 add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET,POST'; 使用以下配置,生效. if ($request_method = 'OPTIONS') { add_heade
基于VUE移动音乐WEBAPP跨域请求失败的解决方法

在学习一位vue大牛的课程<VUE2.0移动端音乐App开发>时,由于vue的版本原因遇到了一些问题这是其中之一,花费了很多的时间去解决虽然搞定了这个问题,但是很多东西理解也不是很到位,下面详细说: 系统windows,vue版本2.9.1 项目结构如下: 这里就知道版本差异了,我没有dev-server这个文件,按照黄大牛的配置会报404的错误,错误具体我就不贴了直接上解决办法首先在config目录下配置index.js文件如下然后在webpack.dev.conf中配置如下当然
Nginx跨域使用字体文件的配置方法

今天在使用子域名访问根域名的CSS时,发现字体无法显示,在确保CSS和Font字体的路径加载无问题后,基本确定是因为跨域的问题. 通过Nginx模块HttpHeadersModule来添加Access-Control-Allow-Origin允许的地址. 解决方法在Nginx的conf目录下修改nginx.conf或者vhost下对应的domain conf,添加以下代码: 复制代码代码如下: location ~* \.(eot|ttf|woff)$ {add_header Access-

Nginx跨域问题解析与解决

目录

什么是跨域

跨域场景

解决跨域的四种方式

相关推荐

随机推荐