搜索文档 /

歌珥错误

歌珥是什么?

跨源资源共享(CORS) 是一种机制,浏览器和webviews -像那些供电电容器和Cordova -使用限制HTTP和HTTPS请求从脚本在不同来源的资源出于安全原因,主要是为了保护您的用户数据和防止攻击,会危及您的应用程序。

为了知道外部来源是否支持CORS,服务器必须发送一些 特殊的头 以便浏览器允许请求。

一个 起源 组合是 协议 , 港口 您的离子应用程序或外部资源的服务betway东盟体育app。例如,在电容器中运行的应用程序 电容器:/ / localhost (iOS)或 http://localhost (Android)作为它们的起源。

当你的应用服务的来源(例如。 http://localhost:8100 betway东盟体育app离子服务 )和被请求资源的来源(例如: https://api.example.com )不匹配,浏览器的 同源策略 生效,并要求CORS提出申请。

CORS错误在web应用中很常见,当一个跨源请求被发出,但服务器没有在响应中返回所需的头信息(没有启用CORS):

XMLHttpRequest无法加载https://api.example.com。请求的资源上没有'Access-Control-Allow-Origin'头。因此,Origin 'http://localhost:8100'是不允许访问的。

CORS是如何工作的

请求与起飞前的

默认情况下,当web应用试图发出跨源请求时,浏览器会发送一个 起飞前的请求 在实际请求之前。为了知道外部资源是否支持CORS以及实际请求是否可以安全发送,需要这个飞行前请求,因为它可能会影响用户数据。

在以下情况下,浏览器会发送一个飞行前请求:

  • 方法是:
    • 删除
    • 连接
    • 选项
    • 跟踪
    • 补丁
  • 或者如果它的头文件不是:
    • 接受
    • 接收语言
    • 内容语言
    • 内容类型
    • DPR
    • 下行
    • 保存数据
    • Viewport-Width
    • 宽度
  • 或者如果它有 内容类型 头以外:
    • 应用程序/ x-www-form-urlencoded
    • 多部分/格式
    • 文本/平原
  • 或者如果一个 ReadableStream 或事件监听器 XMLHttpRequestUpload 使用。

如果上述任何条件满足,飞行前请求与 选项 方法发送给资源URL。

假设我们要做一个 帖子 请求一个虚构的JSON API https://api.example.com 与一个 内容类型 application / json .pre - flight请求是这样的(为了清晰起见,省略了一些默认头文件):


             来源:http://localhost:8100 Access-Control-Request-Method: POST Access-Control-Request-Headers: Content-Type
复制 复制

如果服务器启用了CORS,它将解析 Access-Control-Request - * 标题和理解,a 帖子 请求来自 http://localhost:8100 与一个定制的 内容类型

然后,服务器将响应这个允许使用的起源、方法和头的预飞行 Access-Control-Allow - * 标题:


             Access-Control-Allow-Origin: http://localhost:8100 Access-Control-Allow-Methods: GET, POST, OPTIONS
复制 复制

如果返回的源和方法与实际请求的源和方法不匹配,或者使用的任何头文件都不被允许,请求将被浏览器阻塞,控制台将显示一个错误。否则,将在起飞前提出请求。

在我们的例子中,因为API需要JSON 帖子 请求将有一个 内容类型:application / json 头部和总是预先飞行。

简单的请求

有些请求总是被认为是安全发送的,如果它们满足以下所有条件,就不需要飞行前准备:

  • 方法是:
    • 得到
    • 帖子
  • 只有以下标题:
    • 接受
    • 接收语言
    • 内容语言
    • 内容类型
    • DPR
    • 下行
    • 保存数据
    • Viewport-Width
    • 宽度
  • 内容类型 标题是:
    • 应用程序/ x-www-form-urlencoded
    • 多部分/格式
    • 文本/平原
  • 没有 ReadableStream 或事件监听器 XMLHttpRequestUpload 使用。

在我们的示例API中, 得到 请求不需要预先飞行,因为没有JSON数据正在发送,所以应用程序不需要使用 内容类型:application / json 头。它们总是简单的请求。

歌珥头

服务器头信息(响应)

价值 描述
Access-Control-Allow-Origin 起源 指定允许的源,比如 http://localhost:8100 允许一切起源。
Access-Control-Allow-Methods 方法 访问资源时允许使用哪些方法: 得到 帖子 删除 连接 选项 跟踪 补丁
Access-Control-Allow-Headers 用于响应预飞行请求,以指示在发出实际请求时可以使用哪些头文件,除了 简单的标题 ,这总是允许的。
Access-Control-Allow-Credentials 真正的 是否可以使用凭据进行请求。
Access-Control-Expose-Headers 指定允许浏览器访问的标头。
Access-Control-Max-Age 指示飞行前请求的结果可以缓存多长时间。

浏览器标题(请求)

浏览器在每个请求中自动向服务器发送相应的CORS报头,包括预发送请求。请注意下面的标题仅供参考 不应该在你的应用程序代码中设置 (浏览器会忽略它们)。

所有请求

价值 描述
起源 起源 指示请求的来源。

起飞前的请求

价值 描述
Access-Control-Request-Method 方法 用于让服务器知道在发出实际请求时将使用什么方法。
Access-Control-Request-Headers 用于让服务器知道在发出实际请求时将使用哪些非简单头。

CORS错误解决方案

a .在您控制的服务器中启用CORS

正确且最简单的解决方案是通过返回 正确的响应头 从网络服务器或后端,并响应飞行前的请求,因为它允许继续使用 XMLHttpRequest 获取 ,或抽象 HttpClient 在角。

betway东盟体育app离子应用程序可以从不同的来源运行,但只能指定一个来源 Access-Control-Allow-Origin 头。因此,我们建议检查 起源 请求的头部,并将其反映在 Access-Control-Allow-Origin 响应中的报头。

请注意,所有的 Access-Control-Allow - * 头必须从服务器发送,不属于你的应用程序代码。

以下是一些您的离子应用程序可能提供的来源:betway东盟体育app

电容器

平台 起源
iOS 电容器:/ / localhost
安卓 http://localhost

取代 本地主机 如果您更改了Capacitor配置中的默认值,则使用您自己的主机名。

betway东盟体育app离子WebView 3。x插件在科尔多瓦

平台 起源
iOS betway东盟体育app离子:/ / localhost
安卓 http://localhost

取代 本地主机 使用你自己的主机名,如果你改变了插件配置中的默认值。

betway东盟体育app离子WebView 2。x插件在科尔多瓦

平台 起源
iOS http://localhost:8080
安卓 http://localhost:8080

替换端口 8080 如果你在插件配置中更改了默认值,你可以使用自己的插件。

浏览器中的本地开发

命令 起源
betway东盟体育app离子服务 http://localhost:8100 http://YOUR_MACHINE_IP:8100
npm运行开始 ng服务 http://localhost:4200 离子Anbetway东盟体育appgular应用。

如果你同时服务多个应用,端口号可能更高。


允许任何来源 Access-Control-Allow-Origin: * 保证在所有场景下都能工作,但可能会有安全影响——比如一些CSRF攻击——这取决于服务器如何控制对资源的访问和使用会话和cookie。

更多关于如何在不同的web和应用服务器上启用CORS的信息,请查看 enable-cors.org

CORS可以在Express/Connect应用程序中轻松启用 歌珥 中间件:


              常量
             表达
              
             
              需要
              
              “表达”
              
              
             
              常量
             歌珥
              
             
              需要
              
              “歌珥”
              
              
             
              常量
             应用程序
              
             
              表达
              
              
              
             
              常量
             allowedOrigins
              
             
              
             
              电容器:/ / localhost的
              
             
              “betway东盟体育app离子:/ / localhost”
              
             
              “http://localhost”
              
             
              “http://localhost: 8080”
              
             
              “http://localhost: 8100”
             
              
              
             
              //如果原点在允许的列表中或没有定义(cURL, Postman等),则反射原点
             
              常量
             corsOptions
              
             
              
             
              起源
              
             
              
              起源
               
              回调
              
             
              =>
             
              
             
              如果
             
              
             allowedOrigins
              
              包括
              
             起源
              
             
              ||
             
              
             起源
              
             
              
             
              回调
              
              
              
             
              真正的
              
              
             
              
             
              其他的
             
              
             
              回调
              
              
             
              错误
              
              “CORS不允许产地来源”
              
              
              
             
              
             
              
             
              
             
              //启动所有航线的飞行前请求
             应用程序
              
              选项
              
              ‘*’
              
             
              歌珥
              
             corsOptions
              
              
              
             应用程序
              
              得到
              
              ' / '
              
             
              歌珥
              
             corsOptions
              
              
             
              
              要求的事情
               
              res
               
              下一个
              
             
              =>
             
              
             res
              
              json
              
              
             消息
              
             
              “这条路线在允许的起点上启用了cors。”
             
              
              
              
             
              
              
             应用程序
              
              
              
              3000
              
             
              
              
             
              =>
             
              
             控制台
              
              日志
              
              “启用了cors的web服务器正在监听3000端口”
              
              
             
              
              
              
复制 复制

B.在你无法控制的服务器上围绕CORS工作

别把钥匙弄漏了!

如果你试图连接到第三方API,首先检查它的文档是否安全,可以直接从应用程序(客户端)使用它,它不会泄露任何秘密/私钥或凭证,因为很容易在Javascript代码的明文中看到它们。许多api故意不支持CORS,目的是迫使开发人员在服务器上使用它们并保护重要信息或密钥。

1.独有的本地应用程序(iOS和Android)

使用 HTTP插件离子型原生betway东盟体育app 从webview外部发出请求。请注意,这个插件不能在浏览器中工作,所以应用的开发和测试必须始终在设备或模拟器中进行。

使用离子角4betway东盟体育app

              进口
             
              
             组件
              
             
              
             
              “@angular /核心”
              
             
              进口
             
              
             
              HTTP
             
              
             
              
             
              “@betway东盟体育appionic-native / http / ngx”
              
             
              组件
              
              
             选择器
              
             
              “app-home”
              
             templateUrl
              
             
              ”。/ home.page.html '
              
             styleUrls
              
             
              
              ”。/ home.page.scss '
              
              
             
              
              
             
              出口
             
              
             
              主页
             
              
             
              构造函数
              
               私人
              http
               
              
               HTTP
              
             
              
              
             
              异步
             
              getData
              
              
             
              
             
              试一试
             
              
             
              常量
             url
              
             
              “https://api.example.com”
              
             
              常量
             参数个数
              
             
              
              
              
             
              常量
             
              
             
              
              
              
             
              常量
             响应
              
             
              等待
             
              
              
             http
              
              得到
              
             url
              
             参数个数
              
             
              
              
             
              控制台
              
              日志
              
             响应
              
             状态
              
              
             
              控制台
              
              日志
              
              JSON
              
              解析
              
             响应
              
             数据
              
              
              
             
              //服务器返回的JSON数据
             
              控制台
              
              日志
              
             响应
              
             
              
              
             
              
             
              
             
              
             错误
              
             
              
             
              控制台
              
              错误
              
             错误
              
             状态
              
              
             
              控制台
              
              错误
              
             错误
              
             错误
              
              
             
              //错误信息字符串
             
              控制台
              
              错误
              
             错误
              
             
              
              
             
              
             
              
             
              
复制 复制

2.本地+静脉

通过HTTP/HTTPS代理将请求发送到外部资源,并将必要的CORS头添加到响应中。这个代理必须是可信的或在你的控制之下,因为它将拦截应用程序的大部分流量。

另外,请记住,浏览器或webview将不会接收原始的HTTPS证书,而是从提供的代理发送的证书。为了使用代理,可能需要在代码中重写url。

检查 cors-anywhere 可以部署在您自己的服务器上的Node.js CORS代理。不建议在生产环境中使用免费的托管CORS代理。

C.禁用CORS或浏览器web安全

请注意,CORS的存在是有原因的(用户数据的安全性和防止对您的应用程序的攻击)。 不可能或不建议尝试禁用CORS

老webview喜欢 UIWebView 在iOS上不执行CORS,但已被弃用,很可能很快就会消失。像iOS这样的现代网页视图 WKWebView 或Android WebView (都由Capacitor使用)确实强制CORS,并提供巨大的安全性和性能改进。

如果您正在开发PWA或在浏览器中进行测试,则使用 ——disable-web-security 标志在谷歌Chrome或扩展禁用CORS是一个非常糟糕的主意。你将面临各种各样的攻击,你不能让你的用户承担风险,你的应用一旦生产就无法工作。

来源
以前的
本地错误
Baidu