共计 3465 个字符,预计需要花费 9 分钟才能阅读完成。
5G 时代的宣传热气腾腾,万物互联的生存沉迷到方方面面,网络资源的拜访成了人们生存中不可或缺的存在。拜访应用的多了也常常会遇到无法访问的状况,这个时候关上 Console 往往会看到上面这种红艳艳一片。
红艳艳的报错信息多种多样。然而图上这个谬误置信大家必定常常见到,其实这就是在开发过程中常常遇到的跨域谬误。那跨域报错到底是怎么产生的呢?又要怎么解决呢?
什么是 CORS
CORS,即 Cross-Origin Resource Sharing(跨源资源共享)。当一个资源从与该资源自身所在 服务器不同的域、协定或端口 申请一个资源时,就会发动一个跨域申请。比方,http://domain-a.com 的 HTML 页面通过 <img> 的 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/tomc…
上面示例演示了最低的 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
在脚本中增加如下行:
<?php
header("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 跨域配置,说不定就能够完满解决遇到的问题哦。解决不了也没关系,分割在线的小哥哥小姐姐会为您提供无所不至的服务哦!
举荐浏览
浅谈 FTP、FTPS 与 SFTP
HTTP/3 来了,你理解它么?