尝试从REST API获取数据时，请求的资源上不存在'Access-Control-Allow-Origin‘标头
我正在尝试从HP Alm的REST API中获取一些数据。它和一个小的curl脚本一起工作得很好--我得到了我的数据。
现在，使用JavaScript、fetch和ES6 (或多或少)来做这件事似乎是一个更大的问题。我一直收到这个错误消息：
Fetch API无法加载。对印前检查请求的响应未通过访问控制检查:请求的资源上不存在“access - control -Allow-Origin”标头。起源‘
http://127.0.0.1:3000
‘是不允许访问的。响应的HTTP状态代码为501。如果不透明的响应满足您的需求，请将请求的模式设置为'no- CORS‘，以便在禁用CORS的情况下获取资源。
我知道这是因为我试图从本地主机中获取数据，而解决方案应该是使用CORS。现在我以为我真的做到了，但不知何故，它要么忽略了我在标题中写的内容，要么问题出在其他地方？
那么，是否存在实现问题？我做错了吗？不幸的是，我不能检查服务器日志。我真的被困在这里了。
function performSignIn() {
let headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('Accept', 'application/json');
headers.append('Access-Control-Allow-Origin', 'http://localhost:3000');
headers.append('Access-Control-Allow-Credentials', 'true');
headers.append('GET', 'POST', 'OPTIONS');
headers.append('Authorization', 'Basic ' + base64.encode(username + ":" + password));
fetch(sign_in, {
//mode: 'no-cors',
credentials: 'include',
method: 'POST',
headers: headers
})
.then(response => response.json())
.then(json => console.log(json))
.catch(error => console.log('Authorization failed : ' + error.message));
}我正在使用Chrome。我也尝试过使用Chrome CORS插件，但随后收到了另一条错误消息：
响应中的“Access-Control-Allow-Origin”标头的值不能是通配符“
*
‘当请求的凭据模式为'include’时。起源‘
http://127.0.0.1:3000
‘是不允许访问的。由withCredentials属性控制XMLHttpRequest发起的请求的凭据模式。
回答 11
Stack Overflow用户
发布于 2019-01-24 16:30:12
出现问题的原因是您将以下代码添加为
请求
前端的标题：
headers.append('Access-Control-Allow-Origin', 'http://localhost:3000');
headers.append('Access-Control-Allow-Credentials', 'true');这些标头属于
响应
，而不是请求。所以
删除
它们，包括这一行：
headers.append('GET', 'POST', 'OPTIONS');您的请求
，因此触发了所谓的CORS预检。这导致浏览器使用OPTIONS方法发送请求。请参见
CORS印前检查
获取详细信息。
因此，在您的
后端
，您必须通过返回响应头来处理这个预加载的请求，这些响应头包括：
Access-Control-Allow-Origin : http://localhost:3000
Access-Control-Allow-Credentials : true
Access-Control-Allow-Methods : GET, POST, OPTIONS
Access-Control-Allow-Headers : Origin, Content-Type, Accept当然，实际的语法取决于后端使用的编程语言。
在你的前端，它应该是这样的：
function performSignIn() {
let headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('Accept', 'application/json');
headers.append('Authorization', 'Basic ' + base64.encode(username + ":" + password));
headers.append('Origin','http://localhost:3000');
fetch(sign_in, {
mode: 'cors',
credentials: 'include',
method: 'POST',
headers: headers
})
.then(response => response.json())
.then(json => console.log(json))
.catch(error => console.log('Authorization failed : ' + error.message));
}Stack Overflow用户
发布于 2019-09-26 05:46:49
在我的例子中，我使用以下解决方案
前端或角度
post(
this.serverUrl, dataObjToPost,
{
headers: new HttpHeaders({
'Content-Type': 'application/json',
})
}
)后端(我使用php)
header("Access-Control-Allow-Origin: http://localhost:4200");
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
header("Access-Control-Allow-Headers: Content-Type, Authorization");
$postdata = file_get_contents("php://input");
$request = json_decode($postdata);
print_r($request);Stack Overflow用户
发布于 2018-09-29 03:14:35
使用
对我很管用。
async function get_ajax_data(){
var _reprojected_lat_lng = await $.ajax({
type: 'GET',
dataType: 'jsonp',
data: {},
url: _reprojection_url,
error: function (jqXHR, textStatus, errorThrown) {
console.log(jqXHR)
},
success: function (data) {
console.log(data);
// note: data is already json type, you
// just specify dataType: jsonp
return data;
}
});
} // functionhttps://stackoverflow.com/questions/43871637
复制相似问题
腾讯云开发者
