歌珥错误
歌珥是什么?
跨地域资源共享(CORS) 是一种浏览器和web视图(比如电容和Cordova)的机制，用于出于安全原因限制脚本对不同来源资源的HTTP和HTTPS请求，主要是为了保护用户的数据，防止可能损害应用程序的攻击。
为了知道外部源是否支持CORS，服务器必须发送一些CORS 特殊的头 以便浏览器允许请求。
一个
起源
是组合的
协议
，
域
,
港口
你的Ionic应用程序或外部资源betway东盟体育app。例如，在电容中运行的应用程序有
电容器:/ / localhost
(iOS)或
http://localhost
(Android)作为它们的起源。
当你的应用程序的来源(例如。
http://localhost:8100
与
betway东盟体育app离子服务
)和所请求资源的来源(例如:
https://api.example.com
)不匹配，浏览器的
同源策略
已生效，并须有coors才可提出申请。
CORS错误在web应用中很常见，当发出跨源请求，但服务器没有在响应中返回所需的报头(没有启用CORS):
XMLHttpRequest无法加载https://api.example.com。请求的资源上没有'Access-Control-Allow-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
．preflight请求是这样的(为了清晰起见，省略了一些默认的报头):
来源:http://localhost:8100 Access-Control-Request-Method: POST Access-Control-Request-Headers: Content-Type
如果服务器启用了CORS，它将解析
Access-Control-Request - *
头和理解，一个
帖子
请求正试图从
http://localhost:8100
与一个定制的
内容类型
．
然后，服务器将响应这个允许起源、方法和头文件的预处理
Access-Control-Allow - *
标题:
HTTP/1.1 200 OK Access-Control-Allow-Origin: http://localhost:8100 Access-Control-Allow-Methods: GET, POST, OPTIONS访问控制- allow - headers: Content-Type如果返回的起源和方法与实际请求中的不匹配，或者使用的任何头文件都不允许，则请求将被浏览器阻止，并在控制台中显示错误。否则，将在飞行前准备之后发出请求。
在我们的例子中，由于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
正确且最简单的解决方案是通过返回
正确的响应头
从web服务器或后端响应飞行前的请求，因为它允许继续使用
XMLHttpRequest
，
获取
，或者抽象
HttpClient
在角。
betway东盟体育app离子应用程序可以从不同的源运行，但只能指定一个源
Access-Control-Allow-Origin
头。因此，我们建议检查的值
起源
消息头，并将其反射到
Access-Control-Allow-Origin
头。
请注意所有的
Access-Control-Allow - *
头文件必须从服务器发送，不属于你的应用程序代码。
以下是你的Ionic应用程序可能来自的一些来源:betway东盟体育app
电容器
| 平台 | 起源 |
|---|---|
| iOS |
电容器:/ / localhost |
| 安卓 |
http://localhost |
取代
本地主机
如果您更改了电容配置中的默认值，则使用您自己的主机名。
betway东盟体育app离子WebView 3。Cordova上的x插件
| 平台 | 起源 |
|---|---|
| iOS |
betway东盟体育app离子:/ / localhost |
| 安卓 |
http://localhost |
取代
本地主机
如果您更改了插件配置中的默认值，则使用您自己的主机名。
betway东盟体育app离子WebView 2。Cordova上的x插件
| 平台 | 起源 |
|---|---|
| iOS |
http://localhost:8080 |
| 安卓 |
http://localhost:8080 |
替换端口
8080
如果你在插件配置中更改了默认值，则使用你自己的插件。
浏览器中的本地开发
| 命令 | 起源 |
|---|---|
betway东盟体育app离子服务 |
http://localhost:8100
或
http://YOUR_MACHINE_IP:8100 |
npm运行开始
或
ng服务 |
http://localhost:4200
用于离子betway东盟体育app型Angular应用。 |
如果你同时服务多个应用程序，端口号可能会更高。
允许任何与
Access-Control-Allow-Origin: *
保证在所有场景下都能工作，但可能会有安全影响——像一些CSRF攻击——取决于服务器如何控制对资源的访问以及使用会话和cookie。
有关如何在不同的web和应用程序服务器中启用CORS的更多信息，请查看 enable-cors.org
可以轻松地在Express/Connect应用程序中启用CORS 歌珥 中间件:
常量
表达
＝
需要
（
“表达”
）
；
常量
歌珥
＝
需要
（
“歌珥”
）
；
常量
应用程序
＝
表达
（
）
；
常量
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)
使用 来自Ionic Native的HTbetway东盟体育appTP插件 从webview外部本机发出请求。请注意，这个插件不能在浏览器中工作，所以应用程序的开发和测试必须始终在设备或模拟器中进行。
在Ionic Anbetway东盟体育appgular 4中使用
进口
｛
组件
｝
从
“@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
(两者都由电容使用)强制执行CORS，并提供了巨大的安全性和性能改进。
如果正在开发PWA或在浏览器中进行测试，请使用
——disable-web-security
标志在谷歌Chrome或扩展禁用CORS是一个非常坏的主意。你会暴露在各种攻击中，你不能要求你的用户去冒险，你的应用在生产中就不能工作了。
