“网页内容无法访问”可能是跨域错误!
5G 时代的宣传热火朝天,万物互联的生活沉浸到方方面面,网络资源的访问成了人们生活中不可或缺的存在。访问使用的多了也经常会遇到无法访问的情况,这个时候打开 Console 往往会看到下面这种红彤彤一片。
红彤彤的报错信息多种多样。但是图上这个错误相信大家肯定经常见到,其实这就是在开发过程中经常遇到的跨域错误。那跨域报错究竟是怎么产生的呢?又要怎么解决呢?
什么是 CORS
CORS,即 Cross-Origin Resource Sharing (跨源资源共享)。当一个资源从与该资源本身所在服务器不同的域、协议或端口请求一个资源时,就会发起一个跨域请求。比如, http://domain-a.com 的 HTML 页面通过 的 src 请求 http://domain-b.com/image.jpg。由于域名不同,就会触发跨域。这是由于浏览器的同源策略造成,当然,这也是为了防止一些 XSS、CSRF 攻击。目前的许多 HTML 页面都会加载来自不同域下的 CSS 样式表,图像和脚本等资源。因此,解决跨域问题显得尤为重要。
CSRF 攻击:
Cross-site request forgery, 跨站请求伪造。是指黑客引诱用户打开黑客的网站,在黑客的网站中,利用用户的登录状态发起跨站请
CORS 是现在使用率较高的一种网络浏览器技术规范,它为 Web 服务器定义了一种方式,允许网页从不同的域访问其资源。跨源资源共享标准通过新增一系列 HTTP 头,让服务器能声明那些来源可以通过浏览器访问该服务器上的资源。此时需要在 Response Header 中增加跨域相关配置,这样就可以使得资源的安全访问成为可能。
另外,对于那些可能对服务器数据产生副作用的 HTTP 请求方法(除 GET/POST/HEAD 方法),浏览器必须首先通过 OPTIONS 方法发起一个预检请求(preflight),从而获知服务端是否允许该跨域请求。服务器确认允许后,才会发起实际的 HTTP 请求。
# curl -X OPTIONS http://v0.api.upyun.com -v
* Trying 58.222.18.54:80...
* Connected to v0.api.upyun.com (58.222.18.54) port 80 (#0)
> OPTIONS / HTTP/1.1
> Host: v0.api.upyun.com
> User-Agent: curl/7.72.0
> Accept: */*
>
< HTTP/1.1 200 OK
< Server: marco/2.13
< Date: Thu, 17 Sep 2020 05:59:03 GMT
< Content-Type: application/octet-stream
< Transfer-Encoding: chunked
< Connection: keep-alive
< Access-Control-Allow-Origin: *
< Access-Control-Allow-Headers: Authorization, Content-Secret, Content-Length, Content-Type, Content-Md5, X-Date, X-Requested-With, Origin … ...
< Access-Control-Allow-Methods: PUT, GET, POST, HEAD, OPTIONS, DELETE
< Access-Control-Expose-Headers: X-Upyun-Multi-Uuid, X-Upyun-Remain-Size, X-Upyun-Next-Part-Id, X-Upyun-Next-Part-Size
<
* Connection #0 to host v0.api.upyun.com left intac
Access-Control-Allow-Origin:允许的域
Access-Control-Allow-Methods:允许的跨域的请求方法
Access-Control-Allow-Headers:在响应预检请求的时候使用,用来指明在实际的请求中,可以使用哪些自定义 HTTP 请求头
Access-Control-Expose-Headers:设置浏览器允许访问的服务器的头信息的白名单
Access-Control-Max-Age:这次预请求的结果的有效期是多久,单位为秒
如何配置 CORS
目前所有的主流浏览器都已基本提供对跨域资源共享的支持,移动浏览器也几乎全部支持,当然我们的老朋友 IE 浏览器有一点特殊要求,不能低于 IE10。
弄清楚了 CORS 的原理,我们就可以针对当前的场景和需求进行跨域共享配置。
服务器端
Apache
Apache 需要使用 mod_headers 模块来激活 HTTP 头的设置,默认是激活状态的。只需要修改 Apache 配置文件中的 httpd.conf 文件:
<Directory />
AllowOverride none
Require all denied
</Directory
改为下面代码
<Directory />
Require all denied
Header set Access-Control-Allow-Origin *
</Directory>
Nginx
可以使用 Headers 核心模块启用 CORS,该模块默认情况下已编译到 Nginx 中:
add_header Access-Control-Allow-Origin *;
IIS 7
将其添加到应用程序/站点根目录下的 web.config 文件中:
<?xml version="1.0" encoding="utf-8"?><configuration><system.webServer><httpProtocol><customHeaders><add name="Access-Control-Allow-Origin" value="*" /></customHeaders></httpProtocol></system.webServer></configuration>
Tomcat
Tomcat 包括了对 CORS 的支持(从 7.0.41 开始)。可参考:http://tomcat.apache.org/tomcat-7.0-doc/config/filter.html#CORS_Filter
下面示例演示了最低的 CORS 配置:
<filter><filter-name>CorsFilter</filter-name><filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
</filter>
<filter-mapping><filter-name>CorsFilter</filter-name><url-pattern>/*</url-pattern>
</filter-mapping>
Web 端
ASP.NET
在源页面添加如下行:
Response.AppendHeader(“ Access-Control-Allow-Origin”,“ *”);
PHP
在脚本中添加如下行:
<?phpheader("Access-Control-Allow-Origin: *");
ExpressJS
在 node.js 上的 ExpressJS 应用中,执行以下操作:
app.all('/', function(req, res, next) {res.header("Access-Control-Allow-Origin", "*");res.header("Access-Control-Allow-Headers", "X-Requested-With");next()});app.get('/', function(req, res, next) {// Handle the get for this route});app.post('/', function(req, res, next) {// Handle the post for this route})
又拍云的 CORS 配置
对于 CDN 访问中遇到的跨域问题,又拍云提供了灵活的 CORS 配置来解决。
登陆 CDN 控制台,依次进入:服务管理 > 功能配置 > 访问控制 > CORS 跨域共享,点击【管理】按钮即可开始配置。如下图所示:
其次,还可以通过又拍云强大的边缘规则来强制添加跨域头,如图所示:
“我曾经跨过山和大海……”,下次再遇到这种漫山遍野的红色跨域报错,可以来又拍云试试 CORS 跨域配置,说不定就可以完美解决遇到的问题哦。解决不了也没关系,联系在线的小哥哥小姐姐会为您提供无微不至的服务哦!
“网页内容无法访问”可能是跨域错误!相关推荐
- sliverlight 访问WCF服务跨域错误解决方法
sliverlight访问wcf服务提示跨域错误! 一般是由于跨域文件不存在造成的,方法是创建XML 文件重命名为clientaccesspolicy(必须是这个名字)内容 <?xml vers ...
- 后端配置了跨域配置前端访问还是提示跨域
后端配置文件: @Configuration public class WebAppConfiguration implements WebMvcConfigurer {/*** 解决跨域问题**/@ ...
- 什么是同源???跨域错误???如何解决???
同源:指发出请求所在的页面 与 所请求的资源的url 协议相同,域名相同,端口相同. 跨域错误:指不同源的ajax请求. 浏览器向web服务器发起http请求时 ,如果同时满足以下三个条件时,就会出现 ...
- 谷歌新版本跨域错误深度剖析与解决:request client is not a secure context and the resource is in more-private address
快速解决: ====================================================== 最近在测试http服务时,谷歌浏览器报了以下错误 "The requ ...
- JS跨域访问(ajax跨域)
好吧,国庆有点不务正业,玩了几天游戏,咳咳 感觉还不错,放松下,本来是打算学angular2的,国庆的时候刚好也看到vue2的正式版本发布,恩,最后都没看.. 正言 为什么会出现跨域? 跨域的产生是因 ...
- vue中axios访问Java后端跨域问题解决
vue中axios访问Java后端跨域问题解决 参考文章: (1)vue中axios访问Java后端跨域问题解决 (2)https://www.cnblogs.com/soinve/p/9295009 ...
- Jquery的load加载本地文件出现跨域错误的解决方案
Jquery的load加载本地文件出现跨域错误的解决方案 参考文章: (1)Jquery的load加载本地文件出现跨域错误的解决方案 (2)https://www.cnblogs.com/jing-t ...
- istio: h5应用访问后端接口 (跨域+路由管理)
本文实验链路:h5 > demo-a > demo-b 在实验过程出现跨域问题,直接使用istio解决,没有调整后端代码 h5应用版本准备 版本代码区分 实验需要h5项目有两个版本,为了区 ...
- 【分享】FD js本地调试文件替换后CROS跨域错误
本文所有教程及源码.软件仅为技术研究.不涉及计算机信息系统功能的删除.修改.增加.干扰,更不会影响计算机信息系统的正常运行.不得将代码用于非法用途,如侵立删! FD js本地调试文件替换后CROS跨域 ...
最新文章
- redis的主从复制,读写分离,主从切换
- [JAVA]寻找满足和的最短子序列(Minimum Size Subarray Sum)
- 基本概念_程序员基本功——链表的基本概念
- Redis03_基础命令操作
- python 随机字符串_python生成随机数、随机字符串
- 鸿蒙轻内核的得力助手:带你掌握4种内存调试方法
- linux-2.6内核模块引用计数的实现(try_module_get和module_put)
- php核心语法,PHP核心语法总结
- android 动画x轴旋转,android – 动画在视图之间转换,在z轴上旋转...
- 若依二次开发添加 select 下拉框 变大 和 有空格存在
- iVIEW: An Intelligent Video over InternEt and Wireless Access System
- 如何查看redhat社区的solution(或者订阅);redhat内容不全
- Ubuntu下安装php7.1的gd,mysql,pdo_mysql扩展库
- 机器人学导论学习笔记(持续更新)
- Python 源代码代码打包成 whl 文件
- css——居中对齐方法
- 中坚力量:Isilon
- 学习笔记Android弹框material-dialogs
- 第三届SaaS峰会——超超级大咖前来助阵!上午场门票价格即将上调!
- 华为nova手机打开开发者模式
热门文章
- Zookeeper_环境搭建及客户端使用
- Java内存结构与垃圾回收机制算法分析
- linux系统牵引程序设置,Linux上安装Wine运行AutoCAD实例[多图]
- Spring DefaultListableBeanFactory
- 1-100以内的数求和,求出当和第一次大于20的当前数
- html图片爆炸效果,利用CSS3制作3D图片爆炸效果
- HX720/HX711 数据采集及处理姿态解析(公式及源码)
- 磊哥评测之数据库:腾讯云MongoDB vs自建
- 51CTO学院四周年-成长之路
- RHEL/CENTOS 性能优化