javascript - 预检响应中的 Access-Control-Allow-Headers 不允许 XMLHttpRequest 请求标头字段 postman-token
问题描述
我正在尝试访问 smartthings API 以在本地控制设备。当我使用以下 chrome 扩展程序时,它可以工作,但是我不想依赖这样的东西:https ://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=en
不使用扩展程序时出现以下错误:
Access to XMLHttpRequest at 'https://api.smartthings.com/v1/devices/XXXX-
XXXX-XXXX/commands'from origin 'http://localhost:8080' has been blocked by
CORS policy: Request header field postman-token is not
allowed by Access-Control-Allow-Headers in preflight response.
我一直试图理解 CORS 以及为什么我被“拒绝”可以这么说,但我感到困惑的是我的响应/请求标头似乎是正确的。以下是请求和响应标头:
GENERAL
Request URL: https://api.smartthings.com/v1/devices/XXXX-XXXX-XXXX/commands
Request Method: OPTIONS
Status Code: 204 No Content
Remote Address: 1x.xxx.1xx.xx:xxx
Referrer Policy: no-referrer-when-downgrade
RESPONSE HEADERS
Access-Control-Allow-Headers: DNT,Keep-Alive,User-Agent,If-Modified-Since,Cache-Control,Content-Type,Accept,Authorization,X-ST-Client,X-ST-Api-Version,X-ST-Client-AppVersion,X-ST-Client-OS,X-ST-Client-DeviceModel
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Origin: *
Access-Control-Max-Age: 1728000
Connection: keep-alive
Content-Length: 0
Content-Type: text/plain charset=UTF-8
Date: Tue, 06 Aug 2019 16:19:52 GMT
Server: openresty
REQUEST HEADERS
Provisional headers are shown
Access-Control-Request-Headers: authorization,cache-control,content-type,postman-token
Access-Control-Request-Method: POST
Origin: http://localhost:8080
Referer: http://localhost:8080/compare/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/xxx.xx (KHTML, like Gecko) Chrome/xx.x.xxxx.xxx Safari/xxx.xx
我对此的困惑是 smartthings 响应似乎允许 *,这让我认为我不应该收到这个错误。但是,我对如何从头到尾编辑/调整这些标题有点困惑,基本上我想做任何 chrome 扩展正在做的事情?以下是我调用 smartthings API 的方式:
function APIAWAY(){
var settings = {
"async": true,
"crossDomain": true,
"url": "https://api.smartthings.com/v1/devices/XXX-XXXX/commands",
"method": "POST",
"headers": {
"Authorization": "Bearer XXXX-XXXX-XXXX",
"Content-Type": "application/json",
"Accept": "*/*",
"Cache-Control": "no-cache",
"Postman-Token": "XXXX-XXXX-XXXX",
"cache-control": "no-cache"
},
"processData": false,
"data": "{\r\n\"commands\": [\r\n{\r\n\"component\": \"main\",\r\n\"capability\": \"switch\",\r\n\"command\": \"on\"\r\n}\r\n]\r\n}"
}
$.ajax(settings).done(function (response) {
console.log(response);
});
}
解决方案
做这个 -
function APIAWAY(){
var settings = {
"async": true,
"crossDomain": true,
"url": "https://api.smartthings.com/v1/devices/XXX-XXXX/commands",
"method": "POST",
"headers": {
"Authorization": "Bearer XXXX-XXXX-XXXX",
"Content-Type": "application/json",
"Accept": "*/*",
"Cache-Control": "no-cache",
"cache-control": "no-cache"
},
"processData": false,
"data": "{\r\n\"commands\": [\r\n{\r\n\"component\": \"main\",\r\n\"capability\": \"switch\",\r\n\"command\": \"on\"\r\n}\r\n]\r\n}"
}
$.ajax(settings).done(function (response) {
console.log(response);
});
}
问题是您正在添加Postman-Token
服务器不接受的标头。
推荐阅读
- javascript - OpenLayers 6 + Angular 8:LineString(s) 未显示在矢量图层上(JS 没有错误)
- javascript - 映射 2 个对象并根据值创建对象
- sql - 简单的 MSAccess SQL UNION ALL;如何包含自动注释列值?
- swagger - 使用 Swagger 描述多范围参数
- php - Laravel 关系不返回任何内容
- javascript - 鼠标悬停和时间隐藏 div 弹出窗口
- r - 使用 biomaRt 将 Ensembl ID 转换为基因名称
- javascript - 使用 react-native-print 直接打印文档 html
- c++ - 使用 std::move 将 std::unique_ptr 作为 qt 信号参数传递
- r - 使用 ggplot 绘制回归系数